Redux Form，Radio Button Fields，如何支持变量值？答案

【问题标题】：Redux Form, Radio Button Fields, how to support variable values?Redux Form，Radio Button Fields，如何支持变量值？
【发布时间】：2017-12-07 06:50:33
【问题描述】：

在我的 react redux 表单中，我有以下内容：

        <fieldset className="form-group">
          <legend>Radio buttons</legend>
          {this.props.job_titles.map(jobTitle => (
          <div className="form-check" key={jobTitle.id}>
            <label className="form-check-label">
              <Field
                name="job_title_id"
                component="input"
                type="radio"
                value={jobTitle.id}
              />
              {' '}
              {jobTitle.title}
            </label>
          </div>
          ))}
        </fieldset>

这会正确呈现单选按钮，但是当您单击选择单选按钮时，单选按钮永远不会设置为选中状态。您无法选择选项 - 表单已损坏。

奇怪的是，如果我将 value={jobTitle.id} 更新为 value="anything" 则可以选择单选按钮。

我在 redux 表单文档中没有看到任何关于动态生成的单选按钮的内容。我做错了什么？

谢谢

【问题讨论】：

这些是单选按钮而不是复选框...
你能添加带有<input>元素的代码吗？
@sissonb 表示它在浏览器中的呈现方式？
我想看看<Field> 元素在做什么，但我在这里找到了。 redux-form.com/6.8.0/docs/api/Field.md
您将需要管理 input.checked 属性。 redux-form.com/6.8.0/docs/api/Field.md/…

标签： reactjs redux redux-form react-redux-form

【解决方案1】：

将值转换为字符串：

<Field
            name="job_title_id"
            component="input"
            type="radio"
            value={jobTitle.id.toString()}
          />

【讨论】：

【解决方案2】：

将选中的属性设置为state 或prop，然后在点击处理程序中更新它。

<Field
    onClick={
        () => {
            this.setState((prevState) => {
                return {isChecked: !prevState.isChecked};
            });
        }
    }
    name="job_title_id"
    component="input"
    type="radio"
    checked={this.state.isChecked}
    value={jobTitle.id}
/>

【讨论】：