React组件类目选择（实际项目）

最新推荐文章于 2024-03-19 11:14:06 发布

web前端狗

最新推荐文章于 2024-03-19 11:14:06 发布

阅读量375

点赞数

分类专栏：原创文章标签：前端 react

本文链接：https://blog.csdn.net/crazyfeeling/article/details/84804332

版权

原创专栏收录该内容

16 篇文章 0 订阅

订阅专栏

综合概述：比较上一个例子，数据从实际接口获取的，首先调取接口获取一级类目，然后根据一级类目的id分别获取对应的二级类目

1.GoodsClassify 组件获取一级类目作为数据源初始化props，通过map循环组件<GoodsDl key={dlindex} obj={o} dlindex={dlindex} />，渲染出<dl><dt></dt></dl>列表，首次render之后，进入componentDidMount生命周期，获取实际dom节点的id，调用二级类目接口，将数组保存在ddArray中，再次渲染出二级类目。

2.componentDidMount仅在首次渲染后执行一次，之后不再执行，componentWillUpdate，首次渲染不执行，在之后状态更新后才执行。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>实际项目中React 类目选择组件</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>
    <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
                  ddArray:[]
              }                      
          },
          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();
                 }
              }
          },
          componentDidMount:function(){ //this.getDOMNode() or ReactDOM.findDOMNode(this)//初次渲染调用一次
             var _this=$(ReactDOM.findDOMNode(this));
             var dirId=_this.find('dt').attr("data-dirid");
             var that=this;
             $.ajax({
                url:"http://***/getThirdLevelCategoryList.html",
                type:"post",
                data:{firstLevelDirId:dirId},
                dataType:"json",
                success:function(data){ 
                    that.setState({
                        ddArray:data.data,
                        childCheckboxNum:data.data.length
                    })
                }
             })
          },
          componentWillUpdate:function(){//初次渲染不调用，状态更新时调用
               var _this=$(ReactDOM.findDOMNode(this));
          },
          render:function(){
              var o=this.props.obj;

              var dd=this.state.ddArray.map(function(i,j){
                    return (
                        <dd key={"dd_"+this.props.dlindex+"_"+j}>
                            <label>
                                <GoodsCheckbox dlcheck={this.state.check} ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} addChecked={this.addChecked} subChecked={this.subChecked}  />{i.dirName}
                            </label>
                        </dd>
                    )
                  }.bind(this));
                 

              return (
                <dl>
                    <dt data-dirid={o.dirId}>
                       <input onChange={this.selectAll} dlcheck={this.state.check}  type="checkbox" checked={this.state.check} />{o.dirName}
                    </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({
          getDefaultProps:function(){
           var dataList=[];
           $.ajax({
                  url:"http://**/getFirstLevelCategoryList.html",
                  type:"post",
                  dataType:"json",
                  async:false,
                  success:function(data){
                      if(data.success){
                          dataList=data.data;
                      }else{
                          //ui.alert(data.message,2000,false)
                      }
                  }
              });
              return {
                 dataList:dataList
              }
          },
          render:function(){
              var data=this.props.dataList;
              var list=data.map(function(o,dlindex){
                 return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} />
              });
              return <div>{list}</div>
          }
      });
      ReactDOM.render(
        <GoodsClassify />,
        document.getElementById('GoodsClassify')
      );
    </script>
  </body>
</html>

web前端狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React组件类目选择（实际项目）

综合概述：比较上一个例子，数据从实际接口获取的，首先调取接口获取一级类目，然后根据一级类目的id分别获取对应的二级类目1.GoodsClassify 组件获取一级类目作为数据源初始化props，通过map循环组件&lt;GoodsDl key={dlindex} obj={o} dlindex={dlindex} /&gt;，渲染出&lt;dl&gt;&lt;dt&gt;&lt;/dt&g...
复制链接

扫一扫