字段表单不会更新选项中的选定值

问题描述

我的项目中有 React Final Form。我在更新 option 中显示的 select 时遇到问题。整个表单工作正常，但不会改变显示值。

function App() {
  const [selectValue,setSelectValue] = useState();

return (
    <Form
      onSubmit={onSubmit}
      initialValues={{}}
      render={({ handleSubmit,form,submitting,pristine,values }) => (
        <form onSubmit={handleSubmit}>
            <label>dish type</label>
            <Field
              name="type"
              component="select"
              defaultValue={selectValue}
              onChange={(e) => setSelectValue(e.target.value)}
              required
            >
              <option value="" />
              <option value="pizza">pizza</option>
              <option value="soup">soup</option>
              <option value="sandwich">sandwich</option>
            </Field>
          </div>
        </form>
      )}
    />
  );

在实时服务器上 option 不会改变它的值。显示的值和我第一次选择的一样。

解决方法

尝试使用常规的 html select。

<select value={selectValue}
              onChange={(e) => setSelectValue(e.target.value)}
              required
            >
              <option value="" />
              <option value="pizza">pizza</option>
              <option value="soup">soup</option>
              <option value="sandwich">sandwich</option></select>