gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:17:17 26 4
gpt4 key购买 nike

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

已经制作了问题的 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”。

最佳答案

我在您的 DropDown.js 文件中将 value 更改为 defaultValue,效果非常好。 Check the sandbox

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

关于reactjs - React Hooks Form Reset 不要将 Select 设置为初始值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57407127/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com