React Redux 表单，如何更改多个按钮颜色？

Question

在第二页使用 Redux 表单向导时，我有两个按钮询问用户性别，男性或女性。

目标：当用户点击任一按钮时，只有该按钮从黑色文本变为橙色。

这是从 ReduxForm website Wizard example at this link.

修改而来的沙盒

问题：

当我点击任一按钮时，它不会单独改变颜色（当我只点击一个按钮时，两个按钮同时改变颜色）。

这里也是gist link及以下的相关文件。我正在为我的编辑器使用 VS Code。

有什么想法吗？谢谢！

WizardFormSecondPage.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from '../wizard_supporting_files/validate';
import renderField from '../wizard_supporting_files/renderField';

import '../css/W2.scss';

class Test extends Component {
  constructor(){
         super();

         this.state = {
              buttonText: true
         }
    }

    changeTextColor(){
        this.setState({buttonText: !this.state.buttonText})
    }

    render(){
        let btn_class = this.state.buttonText ? "blackTextButton" : "orangeTextButton";
        const { input: { value, onChange } } = this.props
        console.log("this props shows", this.props);
        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeTextColor.bind(this)}>
                           Male
                  </button>
                  <button className={btn_class}
                  onClick={this.changeTextColor.bind(this)}>
                    Female
                </button>
             </div>
        )
    }
}

const renderError = ({ meta: { touched, error } }) =>
  touched && error ? <span>{error}</span> : false

const WizardFormSecondPage = props => {
  const { handleSubmit, previousPage } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>What is your gender?</label>
      <div>

            <Field
              name="sex"
              component={Test}
              value="male"
            />

          <label>
            <Field
              name="sex"
              component="input"
              type="radio"
              value="female"
            />{' '}
            Working Radio Button
          </label>
          <Field name="sex" component={renderError} />
        </div>
      </div>
      <div>
        <button type="button" className="previous" onClick={previousPage}>
          Previous
        </button>
        <button type="submit" className="next">
          Next
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'wizard', //Form name is same
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormSecondPage)

W2.scss

  button{
    width: 80px;
    height: 40px;
    margin: 15px;
  }

  .blackTextButton{
    /* background-color: white; */
    color: black;
  }

  .orangeTextButton{
    /* background-color: white; */
    color: orange;
  }

Answer 1

您可以进行以下更改以生成所需的行为：

class Test extends Component {
  constructor() {
    super();
    this.state = {
      buttonText1: false,
      buttonText2: false
    }
  }

  changeTextColor(value) {
    if (value === 1)
      this.setState({ buttonText1: !this.state.buttonText1, buttonText2: false})
    else 
      this.setState({ buttonText1: false, buttonText2: !this.state.buttonText2 })
  }

  render() {
    const { input: { value, onChange } } = this.props
    console.log("this props shows blah", this.props);
    return (
      <div>
        <button type='button' className={this.state.buttonText1 ? 'orangeTextButton' : ''}
          onClick={() => this.changeTextColor(1)}>
          Male
                  </button>
        <button type='button' className={this.state.buttonText2 ? 'orangeTextButton' : ''}
          onClick={() => this.changeTextColor(2)}>
          Female
                </button>
      </div>
    )
  }
}

React Redux 表单，如何更改多个按钮颜色？

React Redux form, how to change multiple button colors?

javascript

button

reactjs

redux-form