React Hooks Form Reset 不要将 Select 设置为初始值

Question

单击重置时，表单应返回到初始值，但选择元素返回到第一个可用选项，对所有其他表单元素使用相同的方法，并且它们更新正确。

制作了问题的 Codesandbox 示例：https ://codesandbox.io/s/lively-snowflake-tf5te

function App() {
  // Data for select dropdown box - selected is Lime
  const SelectData = ["Grapefruit", "Lime", "Coconut", "Mango"];

  // Selected Value
  const selectedValue = "Lime";

  // Set state
  const [selectBox, setSelectBox] = useState(selectedValue);

  // Submit finction
  const handleSubmit = e => {
    e.preventDefault();
    alert(`Select Selection #1: ${selectBox}`);
  };

  // Reset function
  const handleReset = () => {
    setSelectBox(selectedValue);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>
        When 'Reset' is clicked first options is selected
        <br />
        and not the state value.
      </h2>
      <form onSubmit={handleSubmit}>
        <Select
          label="Select Fruit"
          value={selectBox}
          handleChange={e => setSelectBox(e.target.value)}
          data={SelectData}
        />
        <br />
        <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" onClick={handleReset} />
      </form>
      <br />
      Selectbox state value: {selectBox}
      <br />
    </div>
  );
}

重置表单后的预期结果是，Select 元素值为“Lime”，但它是“Grapefruit”。

Answer 1

我在你的文件value中将改为，它的效果非常好。检查沙箱defaultValueDropDown.js

<select defaultValue={value} onChange={handleChange}>
            {data.map(item => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </select>