React Final Form中Field组件select下拉框选中值不更新显示问题

问题根源 #

• React Final Form的Field组件会默认接管表单字段的状态，你额外声明外部useState存值、自定义onChange的操作，覆盖了Field内置的状态同步逻辑，导致Form内部的字段值没有被正确更新
• defaultValue是原生非受控属性，仅首次渲染生效，后续变更不会触发视图更新，不能用在需要动态响应值变化的受控场景

修复方案 #

如果不需要在Form外部单独使用这个下拉框的值，可以直接删掉外部的state，最简可用代码如下：

function App() {
  const onSubmit = (values) => {
    // 提交逻辑，values里会自动包含type字段的值
    console.log(values)
  }

  return (
    <Form
      onSubmit={onSubmit}
      initialValues={{ type: '' }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>Dish type</label>
            <Field
              name="type"
              component="select"
              required
            >
              <option value="" />
              <option value="pizza">pizza</option>
              <option value="soup">soup</option>
              <option value="sandwich">sandwich</option>
            </Field>
          </div>
        </form>
      )}
    />
  );
}

如果确实需要在Form外部拿到这个下拉框的当前值，直接用render参数里的values.type即可，不需要单独维护state：

{/* 比如要在表单里实时展示选中的类型 */}
<div>当前选中的菜品类型：{values.type}</div>

如果必须要自定义onChange逻辑同时保留Form的状态同步，可以在自定义onChange里手动调用Form的change方法同步状态：

<Field
  name="type"
  component="select"
  required
  onChange={(e) => {
    // 自定义业务逻辑
    console.log('选中值变更：', e.target.value)
    // 手动同步到Form状态
    form.change('type', e.target.value)
  }}
>
  {/* options代码保持不变 */}
</Field>

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