用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>