Redux表单，单选按钮字段，如何支持变量值? [英] Redux Form, Radio Button Fields, how to support variable values?

问题描述

在我的React Redux表单中，我有以下内容:

In my react redux form, I have the following:

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

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

This renders the radio buttons correctly, but when you click to select a radio button, the radio button never sets as selected. You can't select an option - the form is broken.

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

What's strange is if I update: value={jobTitle.id} to value="anything" then the radio buttons can be selected.

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

I'm not seeing anything in the redux form docs about radio buttons dynamically generated. What am I doing wrong?

谢谢

推荐答案

将选中的属性设置为state或prop，然后在点击处理程序中对其进行更新.

Set the checked property to a state or prop, then update that in the click handler.

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

这篇关于Redux表单，单选按钮字段，如何支持变量值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！