React实现全选功能-偶像资源网

本文实例为大家分享了React实现全选功能的具体代码，供大家参考，具体内容如下<

1、主要就是使用state状态管理
2、jsx写的时候要多留心，return 的时候最好用一个()包着元素部分，不然有可能编译不过。

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
  <script src=\"./js/react.development.js\"></script>
  <script src=\"./js/react-dom.development.js\"></script>
  <script src=\"./js/babel.min.js\"></script>
  <title>全选事件</title>
</head>
<body>
  <div id=\"root\"></div>
</body>
 
<script type=\"text/babel\">
  class Check extends React.Component{
    constructor() {
      super();
      this.state={
        list:[
          {\'value\':\'苹果\',\'checked\':false},
          {\'value\':\'橘子\',\'checked\':false},
          {\'value\':\'凤梨\',\'checked\':false},
          {\'value\':\'菠萝\',\'checked\':false},
          {\'value\':\'无花果\',\'checked\':false},
          {\'value\':\'火龙果\',\'checked\':false},
          {\'value\':\'西瓜\',\'checked\':false},
        ],
        isAllChecked:false,
        color:\'red\',
        opacity:1
      }
    }
    isAllChecked(e){
      let bool = e.target.checked;
      if(bool){
        this.setState({
          isAllChecked : true
        })
        this.state.list.filter((item)=>{
          item.checked = true;
        })
      }else{
        this.setState({
          isAllChecked : false
        });
        this.state.list.filter((item)=>{
          item.checked = false;
        })
      }
      this.setState({
        list:this.state.list
      })
    }
    singleChecked(e,i){
      // i 就是下标
      this.state.list[i.index].checked = e.target.checked;
      this.setState({
        list:this.state.list
      });
      var bool=this.state.list.filter((item)=>{
        return !item.checked;  
      })
      if(bool.length == 0){
        this.setState({
          isAllChecked : true
        })
      }else{
        this.setState({
          isAllChecked : false
        })
      }
    }
    componentDidMount(){
      console.log(\"挂载完成\");
      setInterval(()=>{
        let opa = this.state.opacity;
        opa >=0 ? opa=opa-0.1 : opa=1;
        this.setState({
          opacity:opa
        })
      },500)
    }
    render(){
      return(
        <div style={{\'color\':\'red\',\'fontSize\':\'20px\'}}>
          <header style={{\'opacity\':this.state.opacity}}>全选练习</header>
          <div style={{\'marginLeft\':\'30px\'}}>
            全选 <input type=\"checkbox\" checked={this.state.isAllChecked ? true : false} onChange={(e)=>{this.isAllChecked(e)}} /><br/><br/>
            {
              this.state.list.map((item,index)=>{
                return (
                  <div key={index}>
                   {item.value} <input type=\"checkbox\"  value={item.value} onChange={(e)=>{this.singleChecked(e,{index})}} 
                   checked={item.checked ? true : false} />
                  </div>
                )
              })
            }
          </div>
        </div>
      )
    }
  }
  ReactDOM.render(
    <Check />,
    document.getElementById(\"root\")
  )
 
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

React实现全选功能

请登录后发表评论