`
癫觉士
  • 浏览: 19505 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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>

 

分享到:
评论

相关推荐

    ReactNative 仿QQ滑动删除组件详解

    这个功能在很多移动应用中都很常见,允许用户通过简单的手势操作来删除列表项。本文将深入探讨如何在React Native中实现这样一个滑动删除组件。 首先,`swipeItem.js` 文件很可能是实现滑动删除功能的核心组件代码...

    react-可视化操控左右多选select的React组件

    以下是对该React组件及其开发过程的详细解析。 首先,我们需要理解React的基本概念。React是一个用于构建用户界面的JavaScript库,它采用组件化的方式来组织代码,使得代码更加可复用和易于维护。在React中,组件是...

    一个强大的ReactNative滑动组件

    React Native滑动组件(react-native-swipeable)是基于此框架的一个扩展库,它提供了一种简单的方式来实现滑动相关的交互,如卡片滑动删除、列表项的左右滑动等常见操作。 滑动组件的核心功能包括: 1. **双向...

    react-DatePicker基于react160以上的日历组件支持移动和PC端

    10. **可组合性**:与其他React组件一样,`react-datepicker`可以与其他库或自定义组件无缝集成,构建复杂的表单或日历应用。 安装`react-datepicker`时,可以使用npm或yarn: ```bash npm install react-...

    react-reactnative跨平台日历组件支持iOSAndroid

    React Native是由Facebook开发的开源框架,它允许开发者使用JavaScript和React来构建原生移动应用。React的核心思想是组件化,这同样适用于React Native。通过编写可重用的组件,开发者可以快速构建复杂的UI,并且在...

    取得一棵ReactNative组件树并将其渲染为SVG

    例如,一个React组件可以对应一个SVG的`&lt;g&gt;`元素,组件的属性可以转换为SVG元素的属性,如`fill`、`stroke`等。 3. **渲染SVG**:利用JavaScript的SVG库,如`d3.js`或`svg.js`,将构建好的SVG结构渲染出来。这些库...

    RN侧滑删除组件

    2. **引入组件**:在你的React组件中导入侧滑列表视图,并根据需求配置属性。 3. **数据绑定**:为列表提供数据源,确保每个列表项都有相应的数据。 4. **事件处理**:定义侧滑时触发的事件,如按钮点击事件。 5. **...

    react-RMind基于ReactHooks与flex布局实现了大部分功能的思维导图

    在IT行业中,React框架是目前前端开发领域中最受欢迎的库之一,它允许开发者构建高性能、可复用且组件化的用户界面。"react-RMind"是一个基于React Hooks和flex布局实现的思维导图工具,它充分利用了React的强大特性...

    ReactNative自定义cell的滑动删除

    在React Native中,自定义cell的滑动删除功能是一种常见的用户界面交互,它允许用户通过滑动列表项来触发删除操作。这个功能在许多应用程序中都有应用,如邮件客户端、任务管理器等。本文将深入探讨如何在React ...

    功能丰富且可自定义的数据网格React组件_TypeScript_JavaScript_下载.zip

    这个“功能丰富且可自定义的数据网格React组件”显然结合了React的灵活性与TypeScript的强类型系统,旨在提供一种高效、高度可定制的方式来显示和操作表格数据。 该组件的核心特性可能包括但不限于以下几点: 1. ...

    react-Vim编辑器为您的ReactWeb应用程序提供支持

    2. **Vim基本操作**:熟悉Vim的普通模式、插入模式和命令模式,掌握基本的移动、编辑和删除命令。 3. **Vim插件系统**:学习如何安装和配置Vim插件,特别是那些能够增强React开发的插件,如语言支持、代码格式化、...

    react 移动端实现列表左滑删除的示例代码

    在React组件中,列表项被包裹在一个全屏宽度(100vw)的视图内,通过`overflow: hidden`确保超出屏幕的部分不显示。列表项内容和删除按钮并排放置,内容占据整个屏幕宽度,而删除按钮则通过绝对定位在右侧。CSS样式...

    react-react面试题之key的作用.zip

    综上所述,`key`在React中是一个至关重要的属性,它提高了React组件的性能,确保状态正确管理,并简化了复杂的列表渲染逻辑。理解并正确使用`key`,可以显著提升React应用的效率和可维护性。在面试中,展示对`key`的...

    react-Reactnative仿支付宝密码输入框

    7. **动画效果**:为了增加用户体验,可以添加输入数字时的动画效果,如数字滑动进入输入框,或者点击删除按钮时的反向滑动效果。 8. **响应式布局**:React Native支持响应式布局,通过`flexbox`模型可以实现跨...

    react-react面试题之diff的原理.zip

    对于同类型的元素,React会执行以下三种操作之一:1) 如果是文本节点,直接比较文本内容,不同则替换;2) 如果是元素但属性不同,更新属性;3) 如果子元素的数量或顺序不同,会根据key进行调整。 4. **Tree Diff...

    GGEditor基于G6和React的可视化图编辑器可用于画流程图思维导图

    2. **交互逻辑**:G6的交互能力被封装成React组件的事件处理函数,通过props传递给子组件,实现图的交互操作。 3. **状态管理**:利用React的状态管理和生命周期方法,GGEditor能实时更新图形状态,如添加、删除、...

    react全套资源

    - React通过虚拟DOM来提高性能,当组件的状态变化时,React会计算出最小的DOM变更,以减少实际DOM操作,提升应用性能。 3. **生命周期方法**: - `componentDidMount`:组件挂载完成后调用,常用于初始化数据获取...

    react移动端H5点餐项目源码首页,商品列表,商品详情,商品购物车汇总.zip

    这部分涉及到React组件设计,数据获取(可能是通过API)和渲染。 4. **商品列表**:商品列表组件展示了所有可用的商品,通常可以进行筛选和排序。这涉及到了React的状态管理,以及与后端服务的数据交互,如使用...

    react-使用reactreconciler实现一个微型dom

    这些方法对应于React组件的生命周期,帮助我们管理组件的挂载、更新和卸载。 5. **调度策略**:React Reconciler的另一个重要部分是调度,它决定了何时以及如何执行DOM更新。在实现微型DOM时,需要考虑如何有效地...

Global site tag (gtag.js) - Google Analytics