Question

我正在渲染多个复选框：

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覆盖，因此在任何情况下都只记录了一个复选框。

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

Answer 1

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

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

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

Answer 2

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

注意：这不是正确的代码，这仅出于您的理解，我假设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

  })
}

`

Answer 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

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

3 个答案: