React 组件编写之类目选择

最近学习react，写了一个类目选择组件练练手。

注：1.this.state 和 this.setState的区别是前者改变状态值不引发render行为，后者相反。

2.父组件传值到自组件，子组件用props属性接收，props可以是父组件函数，经过子组件调用改变父组件状态

3.componetWillReceiveProps: 此生命周期发生在父组件props值改变，子组件可以在此时根据props改变组件内部state状态，this.props获得之前的状态，nextProps获得新的props

代码如下：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Basic Example</title>
      <script src="js/react.js"></script>
      <script src="js/react-dom.js"></script>
      <script src="js/browser.min.js"></script>
      <script src="js/jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <div id="GoodsClassify"></div>
    <div id="show"></div>
    <script type="text/babel">
      var data=[{type:'衣服类',items:['衣服一','衣服二','衣服三']},{type:'电器类',items:['电器一','电器二','电器三']}];
      var GoodsDl=React.createClass({
          getInitialState:function(){
              return {
                  check:false,       //父的选中状态
                  childCheckboxNum:0,//父checkbox下子checkbox的数量
                  childBeChecked:0,  //子checkbox被选中的数量
                  ifuncheckall:true  //childCheckboxNum==childBeChecked时 为true，表示父checkbox取消选择时可以取消所有子checkbox
              }                      //父被取消另一种场景是子全选中时，取消某个子checkbox，父被取消，但其他子不必取消，此时为false
          },
          selectAll:function() {
              this.state.check=!this.state.check;
              this.setState({
                  check:this.state.check
              })
              if(this.state.check){
                  this.state.childBeChecked=this.state.childCheckboxNum;
                  this.state.ifuncheckall=true
              }else{
                  this.state.childBeChecked=0;
              }
          },
          childAffectFather:function(flag){
              if(!flag){ //子未被选中
                 this.setState({
                      check:false,//父取消选中
                      ifuncheckall:false// 父被动取消选中，其他子不被取消
                 })
                 this.state.childBeChecked-=1;
              }else{
                 this.state.childBeChecked+=1;
                 if(this.state.childBeChecked==this.state.childCheckboxNum){
                       this.selectAll();
                 }
              }
          },
          render:function(){
              var o=this.props.obj;
              var dlindex=this.props.dlindex;
                  this.state.childCheckboxNum=o.items.length;
              var dd=o.items.map(function(i,ddindex){ 
                   return( 
                       <dd key={'dd_'+dlindex+'_'+ddindex}>
                          <GoodsCheckbox dlcheck={this.state.check}  ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} />{i}
                       </dd> 
                   ) 
              }.bind(this));
              return (
                <dl>
                    <dt><input onChange={this.selectAll}  type="checkbox" checked={this.state.check}/>{o.type}</dt>
                    {dd}
                </dl>
              )
          }
      });
      var GoodsCheckbox=React.createClass({
          getInitialState:function(){
              return {
                check:false
              }
          },
         componentWillReceiveProps:function(nextProps){
            if(nextProps.dlcheck){ 
                  this.setState({
                      check:true
                  })
              }
              else{
                 if(nextProps.ifuncheckall){
                      this.setState({
                          check:false
                      })
                 }
              }
          },
          selectOne:function() {
              this.state.check=!this.state.check;
              this.setState({
                 check:this.state.check
              })
              this.props.childAffectFather(this.state.check);
          },
          render:function(){
              return <input onChange={this.selectOne} type="checkbox" checked={this.state.check}/>
          }
      });
      var GoodsClassify=React.createClass({
          render:function(){
              var data=this.props.list;
              var list=data.map(function(o,dlindex){
                 return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} />
              });
              return <div>{list}</div>
          }
      });
      ReactDOM.render(
        <GoodsClassify list={data}/>,
        document.getElementById('GoodsClassify')
      );

    </script>
  </body>
</html>

React 组件编写之 类目选择

猜你喜欢

React 组件编写之类目选择