我的狀態如下所示：
const [options, setOptions] = useState({ numbers: false, animals: false, greetings: false, food: false, colors: false, other: true })
我正在嘗試基于復選框更新單個布林值。
起初我使用了這樣的 switch 陳述句：
switch (e.target.id) {
case 'numbers': setOptions((prevState) => ({ ...prevState, numbers: e.target.checked })); break;
case 'animals': setOptions((prevState) => ({ ...prevState, animals: e.target.checked })); break;
case 'greetings': setOptions((prevState) => ({ ...prevState, greetings: e.target.checked })); break;
case 'food': setOptions((prevState) => ({ ...prevState, food: e.target.checked })); break;
case 'colors': setOptions((prevState) => ({ ...prevState, colors: e.target.checked })); break;
case 'other': setOptions((prevState) => ({ ...prevState, other: e.target.checked })); break;
default: break
}
但我認為當我添加更多選項時，我會想要一些更干凈的東西，我希望像
setOptions((prevState) => ({ ...prevState, options[e.target.id]: e.target.checked }))
會作業，但沒有運氣。我也試過
options[e.target.id] = e.target.checked
但它不會重繪 。
uj5u.com熱心網友回復：
您的清潔版本絕對是首選版本，但計算屬性名稱的語法是
{
[ key ]: value
}
我傾向于使用name屬性而不是id，主要是為了避免意外復制 ID。
const handleCheckbox = (e) => {
setOptions(prev => ({
...prev,
[e.target.name]: e.target.checked
}));
};
您只需要確保您的復選框元素具有適當的屬性
{Object.entries(options).map(([option, checked]) => (
<label>
<input
type="checkbox"
name={option}
checked={checked}
onChange={handleCheckbox}
/>
{option}
</label>
))}
uj5u.com熱心網友回復：
為每個復選框添加一個名稱屬性，該名稱應該是選項中的有效鍵。
const [options, setOptions] = useState({ numbers: false, animals: false, greetings: false, food: false, colors: false, other: true })
const handleStateChange = (e)=>{
const {name,value} = e.target
setOptions(preState => ({...preState ,[name]:value}))
}
<input type='checkbox' name='numbers' value={options.numbers} onChange={handleStateChange} />
<input type='checkbox' name='animals' value={options.animals} onChange={handleStateChange} />
<input type='checkbox' name='greetings' value={options.greetings} onChange={handleStateChange} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/453025.html
標籤：javascript 反应 目的 使用状态
上一篇：保持角度在1到180度之間