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

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，但在某些情况下，该变量可能尚未更新，这可能会导致错误。在这种情况下，您可以使用callbackofsetStateReact 文档，关于setState和callback：https&nbsp;:&nbsp;//reactjs.org/docs/react-component.html#setstate输入没有事件处理程序在输入中，您只有checked道具，但没有诸如 之类的事件处理程序onChange，因此当您单击此复选框时，什么也不会发生，因为在这种情况下无需执行任何操作。将事件处理程序添加到输入以在单击时调用函数并更改状态，就像您在button

Answer 2

原因是在切换当前/活动复选框时，没有将当前复选框从选中更改为未选中的代码。一个可能更好的解决方案是为每个复选框设置多个状态，并使用这些状态在复选框本身上使用 onChange 进行切换。<CustomInput globalCheck={globalCheckState} />...const CustomInput = (props) => {&nbsp; &nbsp;const [check, setCheck] = useState(false);&nbsp; &nbsp;if (props.globalChek) {&nbsp; &nbsp; &nbsp;setCheck(true)&nbsp; &nbsp;}&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;<input checked={check} onChange={() => setCheck(!check)} />&nbsp; &nbsp;)}通过这种方式，您可以在单独的状态下处理本地检查状态。该globalCheckState可以用你的按钮进行切换。