react 全选和全不选

Posted 2020-10-24 沐少白

状态：

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

不知道如何解决

*/