使用主按钮和本身切换所有复选框

Question

我有一个功能可以使用按钮一次检查和取消选中所有复选框。完美运行，但每当我使用自身（当前复选框）进行切换时，它就无法正常工作。在我的 Class 组件中：this.state = {   checked: false}toggleCheck(i) {    this.setState({ checked: i });    if (this.state.checked === i) {        this.setState({ checked: false })    }}在我的函数组件中return(   <div>      {         props.thisOne((v,i) => {            return(<input checked={props.checked ? 'checked' : ''}/>)         })      }      <button onClick={props.toggleCheck}>   </div>)有什么办法可以解决这个问题？

Answer 1

1° - setState 是异步的

在 toggleCheck 中，您为变量设置了一个新状态，checked然后立即尝试使用该变量checked，但在某些情况下，该变量可能尚未更新，这可能会导致错误。在这种情况下，您可以使用callbackofsetState

React 文档，关于setState和callback：https : //reactjs.org/docs/react-component.html#setstate

输入没有事件处理程序

在输入中，您只有checked道具，但没有诸如 之类的事件处理程序onChange，因此当您单击此复选框时，什么也不会发生，因为在这种情况下无需执行任何操作。将事件处理程序添加到输入以在单击时调用函数并更改状态，就像您在button

Answer 2

原因是在切换当前/活动复选框时，没有将当前复选框从选中更改为未选中的代码。

一个可能更好的解决方案是为每个复选框设置多个状态，并使用这些状态在复选框本身上使用 onChange 进行切换。

<CustomInput globalCheck={globalCheckState} />

...

const CustomInput = (props) => {

   const [check, setCheck] = useState(false);

   if (props.globalChek) {

     setCheck(true)

   }

   return (

     <input checked={check} onChange={() => setCheck(!check)} />

   )

}

通过这种方式，您可以在单独的状态下处理本地检查状态。该globalCheckState可以用你的按钮进行切换。