上一节说到使用react完成布局和html代码的展示。这一章节将讲解react的数据的绑定。
一、需要使用的React api
1、getInitialState方法，在ES5的语法中用来设置组件的初始化的数据。在该方法中定义要使用的数据模型。
2、setState方法，用来更新组件的数据并更新视图
3、forceUpdate方法，强制更新数据和视图
4、refs属性用来从组件的dom中获取到实际的ref指定的dom元素
5、this.state.xxxx能够获取当前组件中在getInitialState中的数据模型的值
6、this.props.xxxx能够从父组件获取传递过来的值
上一节中，定义了两个组件，展示列表组件和编辑列表组件。现完成两个组件的数据的绑定。
分析：1、展示列表组件，该组件具有删除和编辑的功能，需要添加两个事件，remove和edit。
2、编辑列表组件，该组件提供编辑输入，保存编辑，删除功能，数据由父组件提供。
3、父组件List提供子组件的数据和子组件方法的具体实现。
具体代码如下：
单独的/**
* Created by Lenovo on 2017/4/7.
*/
//展示组件
const Item = React.createClass({
//删除方法
remove(){
this.props.onRemove(this.props.id);
},
//编辑方法
edit(){
this.props.onEdit(this.props.id,this.props.value);
},
render(){
return <li className="list-group-item">
{this.props.value}//此处为通过props来接受从父组件传递过来的数据并绑定到虚拟的dom上
<a href="#" className="item-right glyphicon glyphicon-remove" onClick={this.remove}></a>
<a href="#" className="item-right glyphicon glyphicon-edit" onClick={this.edit}></a>
</li>
}
});
//编辑组件
const EditItem = React.createClass({
getInitialState(){
return{
value:''
}
},
//将录入的数据存入到当前的组件的状态中
changeHandle(event){
this.setState({value:event.target.value});
},
//保存方法调用父组件中的保存方法
save(){
this.props.onSave(this.props.id,this.state.value);
},
//删除方法调用父组件中的删除方法
remove(){
this.props.onRemove(this.props.id);
},
render(){
return <li className="list-group-item">
<input type="text" onChange={this.changeHandle} defaultValue={this.props.value}/>
<a href="#" className="margin-leftandright-5 glyphicon glyphicon-share" onClick={this.save}></a>
<a href="#" className="margin-leftandright-5 glyphicon glyphicon-remove" onClick={this.remove}></a>
</li>
}
});
//容器组件
const List = React.createClass({
getInitialState(){
return{
key:0,
List:new Map(),
eList:new Map()
}
},
//添加方法的具体实现
add(){
const key=this.state.key++;
this.state.eList.set(key,'');
this.forceUpdate();
},
//保存方法的具体实现
save(id,value){
this.state.List.set(id,value);
this.state.eList.delete(id);
this.forceUpdate();
},
//展示列表删除方法的具体实现
remove(id){
this.state.List.delete(id);
this.forceUpdate();
},
//编辑列表删除方法的具体实现
eremove(id){
this.state.eList.delete(id);
this.forceUpdate();
},
//展示列表编辑方法的具体实现
edit(id,value){
this.state.eList.set(id,value);
this.state.List.delete(id);
this.forceUpdate();
},
render(){
const ListDom=[];
const EditListDom=[];
for(let entity of this.state.List){
ListDom.push(<Item value={entity[1]} id={entity[0]}
onRemove={this.remove}
onEdit={this.edit}
/>)
}
for(let entity of this.state.eList){
EditListDom.push(<EditItem value={entity[1]}
id={entity[0]}
onSave={this.save}
onRemove={this.eremove}
/>)
}
return <div>
<button className="menu-btn btn btn-success glyphicon glyphicon-plus" onClick={this.add}>
添加心事
</button>
<ul className="list-group">
{ListDom}
{EditListDom}
</ul>
</div>
}
});
//渲染
ReactDOM.render(
<List/>,
document.getElementById('content')
);
本节讲了数据和dom元素绑定，该项目还存在很多的不好的交互行为，需要进行优化，下一节将对该项目进行优化。
