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

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

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

这是一个从

问题:

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

下面是相关文件。我正在为我的编辑器使用VS代码

有什么想法吗？谢谢大家!

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)

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

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

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

---

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

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>
    )
  }
}

类测试扩展组件{
构造函数（）{
超级（）；
此.state={
buttonText1:错误，
buttonText2:错误
}
}
changeTextColor（值）{
如果（值==1）
this.setState（{buttonext1:！this.state.buttonext1，buttonext2:false}）
其他的
this.setState（{buttonext1:false，buttonext2:！this.state.buttonext2}）
}
render（）{
const{input:{value，onChange}}=this.props
log（“此道具显示废话”，this.props）；
返回(
此.changeTextColor（1）}>
男性
此.changeTextColor（2）}>
女性
)
}
}

在这里可以找到另一种使用代码中已有逻辑的方法：好的，谢谢！这解决了第一个问题，即多个按钮分别更改颜色。另一个问题是，当我点击其中一个按钮时，它不会分派（将JSON数据发送到存储）。对那部分有什么想法吗？“工作单选按钮”按预期工作，而不是上面的两个按钮。{'}工作单选按钮实际上，让我为新问题发布，并为您解决第一个问题提供积分。谢谢@EliaAhadi以下链接将有助于解决该问题：