zoukankan      html  css  js  c++  java
  • react 全选和全不选

    状态:
    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={{"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
    不知道如何解决

    */

     

  • 相关阅读:
    angularJS
    WebSocket通信协议
    重写ajax方法实现异步请求session过期时跳转登录页面
    npm(cnpm)介绍(安装gulp)
    grunt安装与配置
    前端学习之jquery
    前端基础之CSS
    前端基础html
    激活
    socket 网络通信(基于tcp协议)以及粘包解决方案
  • 原文地址:https://www.cnblogs.com/msb-/p/8445169.html
Copyright © 2011-2022 走看看