反应钩子表单重置不将选择设置为初始值

Question

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

已经做了一个代码沙箱的问题示例： 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>
);
}

重置表单后的预期结果是，然后选择元素值为"酸橙"，但它是"葡萄柚"。

Answer 1

我将value更改为defaultValue在您的DropDown.js文件中，它就像魅力一样工作。检查沙盒

<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也不支持onReset事件。因此，该行为类似于$form.reset()，当单击type=Resetbutton时，会将select值重置为默认值。

因此，另一种方法是在select中使用defaultValue道具或使用带有道具onChange普通按钮。