使用主按鈕和自身切換所有復選框

Question

我有一個 function 可以使用按鈕一次選中和取消選中所有復選框。 完美運行，但每當我使用自身（當前復選框）切換時，它就無法正常工作。

在我的 Class 組件中：

this.state = {
   checked: false
}
toggleCheck(i) {
    this.setState({ checked: i });
    if (this.state.checked === i) {
        this.setState({ checked: false })
    }
}

在我的 Function 組件中

return(
   <div>
      {
         props.thisOne((v,i) => {
            return(<input checked={props.checked ? 'checked' : ''}/>)
         })
      }
      <button onClick={props.toggleCheck}>
   </div>
)

有什么辦法可以解決這個問題？

Answer 1

1° - setState 是異步的

在 toggleCheck 中，您為變量checked設置了一個新的 state ，然后您嘗試使用變量checked ，但在某些情況下，此變量可能尚未更新，這會導致錯誤。 在這種情況下，您可以使用setState的callback

React 文檔，關於setState和callback ： https://reactjs.org/docs/react-component.html#setstate

輸入沒有事件處理程序

在輸入中，您只有checked的道具，但沒有諸如onChange之類的事件處理程序，因此當您單擊此復選框時，不會發生任何事情，因為在這種情況下沒有什么可做的。 將事件處理程序添加到輸入以在單擊時調用 function 並更改 state，就像您在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)} />
   )
}

這樣，您可以在單獨的 state 中處理本地檢查 state。 可以使用您的按鈕切換globalCheckState 。