React Final Form：FieldArray内单选按钮UI不选中问题求助

我通过FieldArray动态渲染了一组单选按钮，点击按钮时表单值能正常更新，但UI里的按钮始终不显示选中状态。

现有代码片段 #

<FieldArray name="customers">
    {({ fields }) =>
    fields.map((name, index) => (
        <div key={name}>
        <label>Cust. #{index + 1}</label>
        <label>
            <Field
                name="picked"
                component="input"
                type="radio"
                value={index + 100}
            />{" "}
            Pick {index + 100}
        </label>

表单值更新情况 #

点击单选按钮后，表单值已正确更新：

{
  "customers": [
    {
      "firstName": "first_name_1",
      "lastName": "last_name_1"
    },
    {
      "firstName": "first_name_2",
      "lastName": "last_name_2"
    }
  ],
  "picked": "101"
}

问题原因与修复方案 #

问题出在**Field组件渲染单选按钮时，未正确设置checked属性**。React Final Form的component="input"模式不会自动对比单选按钮的value与表单中picked的值来设置选中状态，需要手动通过render函数处理。

修复后的代码：

<FieldArray name="customers">
  {({ fields }) =>
    fields.map((name, index) => (
      <div key={name}>
        <label>Cust. #{index + 1}</label>
        <label>
          <Field
            name="picked"
            render={({ input }) => (
              <input
                {...input}
                type="radio"
                value={index + 100}
                checked={input.value === String(index + 100)}
              />
            )}
          />{" "}
          Pick {index + 100}
        </label>
      </div>
    ))
  }
</FieldArray>

关键注意点 #

• 表单中picked的值是字符串类型，所以要把单选按钮的数字value转为字符串后再对比，保证checked判断准确
• 使用render函数可以完全控制input的属性，避免默认component模式下的属性遗漏问题

内容的提问来源于stack exchange，提问作者sbedulin