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文件中将defaultValue更改为DropDown.js，它的工作原理就像是魅力。 Check the sandbox

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

Answer 2

您的代码正确。您的“错误”归因于<input type='reset'/>。

将其更改为常规按钮，您会发现它工作正常。

<button onClick={handleReset}>Reset</button>

https://codesandbox.io/s/dark-cdn-qchu5

来自MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

类型为“ reset”的元素呈现为按钮，带有默认的click事件处理程序，该处理程序将表单中的所有输入重置为初始值。

这与您的受控组件相同。

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} /> */}
        <button onClick={handleReset}>Reset</button>
      </form>
      <br />
      Selectbox state value: {selectBox}
      <br />
    </div>
  );

Answer 3

即使select是受控制的组件Form doesn't support onReset event。因此，该行为类似于$form.reset()，当单击select的{{1}}时，会将button的值重置为默认值。

因此，另一种选择是在type=Reset中使用defaultValue道具，或者在select道具中使用普通按钮。

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

3 个答案: