无法设置多个复选框的状态？答案

【问题标题】：Cannot set state of multiple checkboxes?无法设置多个复选框的状态？
【发布时间】：2020-05-23 09:43:48
【问题描述】：

我正在渲染多个复选框：

className, content, visible, handleFeaturesChange}= props;

...

<FormCheck type="checkbox" label={"parking"} name={"parking"} onChange={handleFeaturesChange}></FormCheck>
<FormCheck type="checkbox" label={"Laundry"} name={"laundry"} onChange={handleFeaturesChange}></FormCheck>

来自父组件：

function handleFeaturesChange(event) {
// event.preventDefault();
  const {name, checked} = event.target
  setFeatures({
    ...features,
    [name]: checked
  })
}

但这会导致状态被覆盖 onChange 以便在任何情况下都只有一个复选框被记录为已选中。

如何让多个复选框协同工作？

【问题讨论】：

对于任何在谷歌上搜索的人，我的解决方案是为每个变量（停车、洗衣等）添加单独的 useState 挂钩，并选择在 handleFeaturesChange 中使用哪个 setState。例如，在一个挂钩中初始化所有内容并通过“checkedItem.parking”进行引用，即使使用以下所有解决方案也无法正常工作。

标签： reactjs checkbox react-hooks

【解决方案1】：

看起来您没有将状态值绑定到每个复选框。看起来这可以通过绑定值来解决：

<FormCheck 
  type="checkbox" 
  label={"parking"} 
  name={"parking"} 
  onChange={handleFeaturesChange} 
  checked={features.parking}
/>

注意：这假设 FormCheck 组件采用 checked 属性。如果没有，您需要将其添加到 FormCheck。

【讨论】：

【解决方案2】：

您已将复选框值存储在全局变量中，然后在该变量上设置状态，否则您只是为当前复选框值设置状态

注意：这不是正确的代码，这只是为了你的理解，我假设 setFeatures 作为你 setState() 的函数

let globalCheckBox=[]

<FormCheck 
  type="checkbox" 
  label={"parking"} 
  name={"parking"} 
  onChange={handleFeaturesChange} 
  checked={features.parking}
/>

function handleFeaturesChange(event) {
  const {name, checked} = event.target

globalCheckBox.push({name, checked})

  setFeatures({
...features,
   globalCheckBox

  })
}

【讨论】：

【解决方案3】：

你可以使用状态挂钩，useState。

const [checkedItems, setCheckedItems] = React.useState([false, false])

然后：

<Checkbox
    isChecked={checkedItems.parking}
    onChange={e => setCheckedItems([e.target.checked, checkedItems.parking])}
/>

https://reactjs.org/docs/hooks-state.html

【讨论】：