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

Question

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

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 不会改变它的值。显示的值和我第一次选择时一样。

Answer 1

尝试使用普通的htmlselect。

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