使用 react redux 表单，如何设置隐藏单选按钮周围标签的样式？

Question

使用 react redux-form，我有以下形式：

    <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
      <fieldset className="form-group">
        <Field name="job_title_id" component={errorMessage} />
        {this.props.job_titles.map(jobTitle => (
        <div className="form-check" key={jobTitle.id}>
          <label className="btn btn-secondary">
            <Field
              name="job_title_id"
              component="input"
              type="radio"
              value={jobTitle.id}
              checked={this.props.job_titles.id}
            />
            {' '}
            {jobTitle.title}
          </label>
        </div>
        ))}
      </fieldset>
      <div className="form-group">
        <button className="btn btn-primary" type="submit">Next</button>
      </div>
    </form>

出于样式目的，CSS 隐藏了单选按钮。我需要单选按钮上方的字段知道单选按钮是否被选中，以便我可以将 class 的 ACTIVE 添加到上面的标签：

如果选中：

<label className="btn btn-secondary ACTIVE">

如果没有勾选：

<label className="btn btn-secondary">

使用 React redux 表单，如何设置隐藏单选按钮周围标签的样式？

Answer 1

现在我明白了。

做到这一点的简单方法是通过 onChange 侦听器保持收音机检查状态。因此，您将 class 放入标签中。

constructor(props){
  super(props);
  ....  
  this.onRadioChange = this.onRadioChange.bind(this);

  this.state = {
    radioChecked: false
  }
}

onRadioChange (event) {
  this.setState({
    radioChecked: event.target.value
  });
}
....
<label className={(this.state.radioChecked ? "active": "" ) + " btn btn-secondary"}>
  <Field
    name="job_title_id"
    component="input"
    type="radio"
    value={jobTitle.id}
    checked={this.props.job_titles.id}
    onChange={this.onRadioChange}
  />
  {' '}
  {jobTitle.title}
</label>
....

我认为这应该可以正常工作，尽管我不确定为什么你必须有一个单选按钮，但是没关系:P.

也许使用 Selecting Form Values Example 有更好的解决方案。