React 组件之列表的增加，删除，移动操作

最新推荐文章于 2025-03-24 07:50:39 发布

原创最新推荐文章于 2025-03-24 07:50:39 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #ViewUI

原创专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用React组件来实现列表的展示、增加、删除及位置移动等功能。通过具体实例展示了React组件之间的交互方式，包括数据的传递和状态的更新。

用react 组件实现列表的展示，增加，删除，位置的移动操作

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>列表操作</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>
    <h3>类别枚举：</h3>
    <p>
家用视听设备及相关配件,
冰箱洗衣机及相关配件,
空调及相关配件,
厨房卫浴电器,
电脑,
OA办公,
3C配件,
数字应用,
房产,
美妆,
公益,
运动户外,
家装建材及五金,
生活日用家庭清洁,
宠物/宠物食品及用品,
家纺,
食品及酒水,
礼品,
母婴,
    </p>
    <div id="GoodsClassify"></div>
    <script type="text/babel">
      
      var GoodsClassify=React.createClass({
          getInitialState:function(){
           var dataList=[{"dirId":"101100100100","dirName":"家用视听设备及相关配件","pid":"000000000000","mainDirId":"101100100100","lev":1,"icon":null,"sort":-1},{"dirId":"102100100100","dirName":"冰箱洗衣机及相关配件","pid":"000000000000","mainDirId":"102100100100","lev":1,"icon":null,"sort":-1},{"dirId":"103100100100","dirName":"空调及相关配件","pid":"000000000000","mainDirId":"103100100100","lev":1,"icon":null,"sort":-1},{"dirId":"104100100100","dirName":"厨房卫浴电器","pid":"000000000000","mainDirId":"104100100100","lev":1,"icon":null,"sort":-1},{"dirId":"105100100100","dirName":"电脑","pid":"000000000000","mainDirId":"105100100100","lev":1,"icon":null,"sort":-1},{"dirId":"106100100100","dirName":"OA办公","pid":"000000000000","mainDirId":"106100100100","lev":1,"icon":null,"sort":-1},{"dirId":"107100100100","dirName":"3C配件","pid":"000000000000","mainDirId":"107100100100","lev":1,"icon":null,"sort":-1}];

              return {
                 dataList:dataList
              }
          },
          addList:function(list){
              this.setState({
                  dataList:list
              })
          },
          render:function(){
              return( 
                <div>
                    <GoodsList dataList={this.state.dataList} />
                    <AddGoodsClass dataList={this.state.dataList} addlist={this.addList}/>
                </div>
              )
          }
      });
      var AddGoodsClass=React.createClass({
          handleChange:function(){
              var dataList=this.props.dataList;
              dataList.push({dirName:this.refs.inputNode.value});
              this.props.addlist(dataList)

          },
          render:function(){
             return ( 
                <div>
                    <input ref="inputNode" type="text"/><button onClick={this.handleChange}>添加</button>
                </div>
             )
          }
      });
      var GoodsDl=React.createClass({

          getInitialState:function(){ 
              return {}                 
          },
          componentDidMount:function(){ //this.getDOMNode() or ReactDOM.findDOMNode(this)//初次渲染调用一次
          },
          componentWillUpdate:function(){//初次渲染不调用，状态更新时调用
          },
          deleteRecord:function(){
              this.props.data.splice(this.props.index,1);
              this.props.onUpdate(this.props.data);
          },
          movetoprev:function(){
              if(this.props.index==0) return false;
              var ele=this.props.data.splice(this.props.index,1)[0];
              var previndex=this.props.index-1;
              this.props.data.splice(previndex,0,ele);
              this.props.onUpdate(this.props.data)
          },
          movetonext:function(){
              var ele=this.props.data.splice(this.props.index,1)[0];
              var previndex=this.props.index+1;
              this.props.data.splice(previndex,0,ele);
              console.log(this.props.data.length);
              this.props.onUpdate(this.props.data)
          },
          render:function(){
              var o=this.props.obj;
              return (
                <dl>
                    <dt>
                          {o.dirName}
                          <button className="delete" onClick={this.deleteRecord}>删除</button>
                          <button className="movetoprev" onClick={this.movetoprev}>上移</button>
                          <button className="movetonext" onClick={this.movetonext}>下移</button>
                    </dt>
                </dl>
              )
          }
      });

      var GoodsList=React.createClass({

          getInitialState:function(){
            return {
               dataList:this.props.dataList
            }
          },
          handleChange:function(data){
              this.setState(function(){
                  dataList:data
              })
          },
          componentDidMount:function(){
             this.state.dataList.map(function(i){
                  console.log(i.dirName+',')
             })
          },
          render:function(){
              var data=this.state.dataList;
              var list=data.map(function(o,i){
                 return <GoodsDl key={i} obj={o} data={data} index={i} onUpdate={this.handleChange} />
              }.bind(this));
              return <div>{list}</div>
          }
      });
      ReactDOM.render(
        <GoodsClassify />,
        document.getElementById('GoodsClassify')
      );

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