React数据绑定

上一节说到使用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元素绑定，该项目还存在很多的不好的交互行为，需要进行优化，下一节将对该项目进行优化。