1. 程式人生 > >react 全選和全不選

react 全選和全不選

this hide 反選 margin 解決 大神 pos goods rem

狀態:
this.state ={
check:false,
checks:false,
}

js:

showInput=(e)=>{//全選和全不全
console.log(e.target.checked);
this.setState({
check:e.target.checked,
checks:e.target.checked,
})
}


render()
<Fragment>
<div style={{width:"100%"}}>
<Input type="checkbox" checked={this.state.check} onChange={this.showInput}/>全選
</div>
<div style={{marginLeft:"5rem"}} >
<Input type="checkbox" checked={this.state.checks} index="1" onChange={this.hideInput}/>
<Input type="checkbox" checked={this.state.checks}/>
<Input type="checkbox" checked={this.state.checks}/>
<Input type="checkbox" checked={this.state.checks}/>
<Input type="checkbox" checked={this.state.checks}/>
<Input type="checkbox" checked={this.state.checks}/>
<Input type="checkbox" checked={this.state.checks}/>
</div>
</Fragment>


最近一直搞不定這個反選,react 是數據驅動,我也通過antd 實現了。但是當這個checked不在一個頁面的時候,就懵逼了。如果有幸得到大神幫助解決這個難題本人非常感謝。



我遇到的問題大概經過:
  組件1 父組件

 1.   裏面有2個組件一個全選組件
 2.一個商品組件(商品組件裏面有CheckBox)

  /*

    <allChecked/>
     {list.map((item,index)=>{
          <Goods item={item}>
      })}



  其中《Goods》組件有遍歷的CheckBox
 <allChecked/>組件裏面有一個checkbox
不知道如何解決

*/

 

react 全選和全不選