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

我有一个功能，可以使用一个按钮一次选中和取消选中所有复选框。工作完美，但每当我切换使用本身（当前复选框），它就是不会工作

在我的类组件中：

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>
)

返回(
{
道具。这个（（v，i）=>{
返回（）
})
}
)

---

有什么办法解决这个问题吗？

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

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

<CustomInput globalCheck={globalCheckState} />
...
const CustomInput = (props) => {
   const [check, setCheck] = useState(false);
   if (props.globalChek) {
     setCheck(true)
   }
   return (
     <input checked={check} onChange={() => setCheck(!check)} />
   )
}

...
const CustomInput=（道具）=>{
const[check，setCheck]=useState（false）；
如果（道具全球切克）{
设置检查（真）
}
返回(
setCheck（！check）}/>
)
}

---

这样，您可以在单独的状态中处理本地检查状态。

globalCheckState

可以使用您的按钮进行切换。

1°-设置状态是异步的

在toggleCheck中，您为变量

checked

设置了一个新状态，然后尝试使用变量

checked

，但在某些情况下，此变量可能尚未更新，这可能会导致错误。在这种情况下，您可以使用

setState

的

callback

反应文档，关于

设置状态

和

回调

：

输入没有事件处理程序

---

在输入中，您只选中了

道具，但没有像

onChange

这样的事件处理程序，因此当您单击此复选框时，不会发生任何事情，因为在这种情况下没有什么要做的。将事件处理程序添加到输入中，以便在单击某个函数时调用该函数并更改状态，就像您在

按钮
中所做的那样，我应该是什么？@Y M。这里的问题是，我对输入使用了映射函数。即使我放置了一个hander事件，它也会继续执行相同的功能。除非我将输入的属性改为checked={props.checked==I？'checked'：''}，否则就行了。但是如果我这样做了，checkall的主按钮将不起作用。那么，为什么不在此基础上创建一个新组件，并为输入本身设置一个状态呢。让我补充一下我的意思。我不确定这是否可能。是吗？我还是个新手。。。我想我明白你的意思了。如果我只是为输入创建一个新组件，我只会传递切换选中状态的道具。绝对是三只眼！但我认为你也需要单独切换。如果你注意到的话，我在标记中包含了“事件处理”。因此，缺少事件处理程序。：）