Reactjs 样式化标签在React+；重复形式

我正在用自定义css构建无线电类型的表单。应检查用户点击标签样式和无线电类型输入。但它在React.js+ReduxForm中不起作用

我使用Redux表单设置

初始值

。标签是用CSS设计的，如果选择了CSS，则会添加

active

类

  onSubmit = values => {
    console.log("values", values.tag);
    // not changed, it shows initial value every time
  };

render() {
  return(
  <form onSubmit={handleSubmit(this.onSubmit)}>
  <div className="btn-group" data-toggle="buttons">
    <label
      className="btn_color active"
      htmlFor="blue"
    >
      <Field name="tag" component="input" type="radio" value="blue" id="blue" /> Blue
    </label>
    <label
      className="btn_color"
      htmlFor="red"
    >
      <Field name="tag" component="input" type="radio" value="red" id="red" /> Yellow
    </label>
    <label
      className="btn_color"
      htmlFor="yellow"
    >
      <Field name="tag" component="input" type="radio" value="yellow" id="yellow" /> Yellow
    </label>
  </div>
  </form>
 )
}


function mapStateToProps({ item }) {
  return {
    item: item,
    initialValues: {
       tag: "black"
    }
  }
}

data toggle=“buttons”

是错误切换的原因。我已通过

状态

更改对其进行了更新

.switchItem .btn-group input {
  display: none;
}

.switchItem .btn {
  border: none;
  background-color: #e7e7e7;
  cursor: pointer;
}

btn_color:not(:disabled):not(.disabled).active,
btn_color:not(:disabled):not(.disabled):active,
.show > btn_color.dropdown-toggle {
  background: #000;
}