用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>
相关推荐
这个功能在很多移动应用中都很常见,允许用户通过简单的手势操作来删除列表项。本文将深入探讨如何在React Native中实现这样一个滑动删除组件。 首先,`swipeItem.js` 文件很可能是实现滑动删除功能的核心组件代码...
以下是对该React组件及其开发过程的详细解析。 首先,我们需要理解React的基本概念。React是一个用于构建用户界面的JavaScript库,它采用组件化的方式来组织代码,使得代码更加可复用和易于维护。在React中,组件是...
React Native滑动组件(react-native-swipeable)是基于此框架的一个扩展库,它提供了一种简单的方式来实现滑动相关的交互,如卡片滑动删除、列表项的左右滑动等常见操作。 滑动组件的核心功能包括: 1. **双向...
10. **可组合性**:与其他React组件一样,`react-datepicker`可以与其他库或自定义组件无缝集成,构建复杂的表单或日历应用。 安装`react-datepicker`时,可以使用npm或yarn: ```bash npm install react-...
React Native是由Facebook开发的开源框架,它允许开发者使用JavaScript和React来构建原生移动应用。React的核心思想是组件化,这同样适用于React Native。通过编写可重用的组件,开发者可以快速构建复杂的UI,并且在...
例如,一个React组件可以对应一个SVG的`<g>`元素,组件的属性可以转换为SVG元素的属性,如`fill`、`stroke`等。 3. **渲染SVG**:利用JavaScript的SVG库,如`d3.js`或`svg.js`,将构建好的SVG结构渲染出来。这些库...
2. **引入组件**:在你的React组件中导入侧滑列表视图,并根据需求配置属性。 3. **数据绑定**:为列表提供数据源,确保每个列表项都有相应的数据。 4. **事件处理**:定义侧滑时触发的事件,如按钮点击事件。 5. **...
在IT行业中,React框架是目前前端开发领域中最受欢迎的库之一,它允许开发者构建高性能、可复用且组件化的用户界面。"react-RMind"是一个基于React Hooks和flex布局实现的思维导图工具,它充分利用了React的强大特性...
在React Native中,自定义cell的滑动删除功能是一种常见的用户界面交互,它允许用户通过滑动列表项来触发删除操作。这个功能在许多应用程序中都有应用,如邮件客户端、任务管理器等。本文将深入探讨如何在React ...
这个“功能丰富且可自定义的数据网格React组件”显然结合了React的灵活性与TypeScript的强类型系统,旨在提供一种高效、高度可定制的方式来显示和操作表格数据。 该组件的核心特性可能包括但不限于以下几点: 1. ...
2. **Vim基本操作**:熟悉Vim的普通模式、插入模式和命令模式,掌握基本的移动、编辑和删除命令。 3. **Vim插件系统**:学习如何安装和配置Vim插件,特别是那些能够增强React开发的插件,如语言支持、代码格式化、...
在React组件中,列表项被包裹在一个全屏宽度(100vw)的视图内,通过`overflow: hidden`确保超出屏幕的部分不显示。列表项内容和删除按钮并排放置,内容占据整个屏幕宽度,而删除按钮则通过绝对定位在右侧。CSS样式...
综上所述,`key`在React中是一个至关重要的属性,它提高了React组件的性能,确保状态正确管理,并简化了复杂的列表渲染逻辑。理解并正确使用`key`,可以显著提升React应用的效率和可维护性。在面试中,展示对`key`的...
7. **动画效果**:为了增加用户体验,可以添加输入数字时的动画效果,如数字滑动进入输入框,或者点击删除按钮时的反向滑动效果。 8. **响应式布局**:React Native支持响应式布局,通过`flexbox`模型可以实现跨...
对于同类型的元素,React会执行以下三种操作之一:1) 如果是文本节点,直接比较文本内容,不同则替换;2) 如果是元素但属性不同,更新属性;3) 如果子元素的数量或顺序不同,会根据key进行调整。 4. **Tree Diff...
2. **交互逻辑**:G6的交互能力被封装成React组件的事件处理函数,通过props传递给子组件,实现图的交互操作。 3. **状态管理**:利用React的状态管理和生命周期方法,GGEditor能实时更新图形状态,如添加、删除、...
- React通过虚拟DOM来提高性能,当组件的状态变化时,React会计算出最小的DOM变更,以减少实际DOM操作,提升应用性能。 3. **生命周期方法**: - `componentDidMount`:组件挂载完成后调用,常用于初始化数据获取...
这部分涉及到React组件设计,数据获取(可能是通过API)和渲染。 4. **商品列表**:商品列表组件展示了所有可用的商品,通常可以进行筛选和排序。这涉及到了React的状态管理,以及与后端服务的数据交互,如使用...
这些方法对应于React组件的生命周期,帮助我们管理组件的挂载、更新和卸载。 5. **调度策略**:React Reconciler的另一个重要部分是调度,它决定了何时以及如何执行DOM更新。在实现微型DOM时,需要考虑如何有效地...