用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时，需要考虑如何有效地...