亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

神不在的星期二 2021-12-23 14:35:35
我有一個功能可以使用按鈕一次檢查和取消選中所有復選框。完美運行,但每當我使用自身(當前復選框)進行切換時,它就無法正常工作。在我的 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>)有什么辦法可以解決這個問題?
查看完整描述

2 回答

?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

1° - setState 是異步的

在 toggleCheck 中,您為變量設置了一個新狀態,checked然后立即嘗試使用該變量checked,但在某些情況下,該變量可能尚未更新,這可能會導致錯誤。在這種情況下,您可以使用callbackofsetState

React 文檔,關于setStatecallbackhttps : //reactjs.org/docs/react-component.html#setstate

輸入沒有事件處理程序

在輸入中,您只有checked道具,但沒有諸如 之類的事件處理程序onChange,因此當您單擊此復選框時,什么也不會發生,因為在這種情況下無需執行任何操作。將事件處理程序添加到輸入以在單擊時調用函數并更改狀態,就像您在button


查看完整回答
反對 回復 2021-12-23
?
達令說

TA貢獻1821條經驗 獲得超6個贊

原因是在切換當前/活動復選框時,沒有將當前復選框從選中更改為未選中的代碼。


一個可能更好的解決方案是為每個復選框設置多個狀態,并使用這些狀態在復選框本身上使用 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可以用你的按鈕進行切換。


查看完整回答
反對 回復 2021-12-23
  • 2 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號