使用输入 ID 使用多个键更新状态对象

Question

我的状态是这样的：

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

但它不进行刷新。

Answer 1

您的 cleaner 版本绝对是首选，但 computed property names 的语法是

{
  [ 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>
))}

Answer 2

为每个复选框添加一个名称属性，此名称应该是选项中的有效键。

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} />

使用输入 ID 使用多个键更新状态对象

Update state object with multiple keys using input id

javascript

object

reactjs

use-state