上一節(jié)說到使用react完成布局和html代碼的展示。這一章節(jié)將講解react的數(shù)據(jù)的綁定。
一嗓违、需要使用的React api
1、getInitialState方法图贸，在ES5的語法中用來設(shè)置組件的初始化的數(shù)據(jù)蹂季。在該方法中定義要使用的數(shù)據(jù)模型。
??2疏日、setState方法偿洁，用來更新組件的數(shù)據(jù)并更新視圖
??3、forceUpdate方法沟优，強制更新數(shù)據(jù)和視圖
??4涕滋、refs屬性用來從組件的dom中獲取到實際的ref指定的dom元素
??5、this.state.xxxx能夠獲取當前組件中在getInitialState中的數(shù)據(jù)模型的值
??6挠阁、this.props.xxxx能夠從父組件獲取傳遞過來的值
上一節(jié)中宾肺，定義了兩個組件，展示列表組件和編輯列表組件∏炙祝現(xiàn)完成兩個組件的數(shù)據(jù)的綁定锨用。
分析：1、展示列表組件隘谣，該組件具有刪除和編輯的功能增拥，需要添加兩個事件，remove和edit寻歧。
???2掌栅、編輯列表組件，該組件提供編輯輸入码泛，保存編輯猾封，刪除功能，數(shù)據(jù)由父組件提供弟晚。
???3忘衍、父組件List提供子組件的數(shù)據(jù)和子組件方法的具體實現(xiàn)。
具體代碼如下：
單獨的/**
* 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來接受從父組件傳遞過來的數(shù)據(jù)并綁定到虛擬的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:''
}
},
//將錄入的數(shù)據(jù)存入到當前的組件的狀態(tài)中
changeHandle(event){
this.setState({value:event.target.value});
},
//保存方法調(diào)用父組件中的保存方法
save(){
this.props.onSave(this.props.id,this.state.value);
},
//刪除方法調(diào)用父組件中的刪除方法
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()
}
},
//添加方法的具體實現(xiàn)
add(){
const key=this.state.key++;
this.state.eList.set(key,'');
this.forceUpdate();
},
//保存方法的具體實現(xiàn)
save(id,value){
this.state.List.set(id,value);
this.state.eList.delete(id);
this.forceUpdate();
},
//展示列表刪除方法的具體實現(xiàn)
remove(id){
this.state.List.delete(id);
this.forceUpdate();
},
//編輯列表刪除方法的具體實現(xiàn)
eremove(id){
this.state.eList.delete(id);
this.forceUpdate();
},
//展示列表編輯方法的具體實現(xiàn)
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')
);
本節(jié)講了數(shù)據(jù)和dom元素綁定卿城，該項目還存在很多的不好的交互行為枚钓，需要進行優(yōu)化，下一節(jié)將對該項目進行優(yōu)化瑟押。
