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隐藏了单选按钮。我需要单选按钮上方的字段知道是否选中了单选按钮，所以我可以在上面的标签上添加一类ACTIVE：

如果选中：

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

如果没有选中：

<label className="btn btn-secondary">

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

由于

Answer 1

现在我明白了。

这样做的简单方法是通过onChange侦听器将无线电检查状态保持在状态。因此，您可以将该类放在Label中。

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可能有更好的解决方案。

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

1 个答案: