React 小白之路—TodoList总结
Posted threestoneslee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 小白之路—TodoList总结相关的知识，希望对你有一定的参考价值。
今天使用create-react-app创建一个自己的项目，写了一个TodoList示例演示，写的过程中遇见很多的问题，记录下来,防止以后再犯。
<input ref={this._inputElement} placeholder="enter task" type="text">中的ref={this._inputElement} ,原教程中不是这样子写的，而是ref={(a)=>{this._inputElement=a}} ,这样写是老版本的写法，目前Facebook发布的版本中，先this._inputElement=React.createRef();创建一个ref，然后text:this._inputElement.current.value,使用current,value来获取input的输入内容。
源码：
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state={
items:[]
};
this._inputElement=React.createRef();
this.addItem=this.addItem.bind(this);
this.deleteItem=this.deleteItem.bind(this);
}
addItem(e) {
if(this._inputElement.value!==""){
var newItem = {
text:this._inputElement.current.value,
key:Date.now()
};
console.log(newItem.text);
this.setState((prevState)=>{
return {
items:prevState.items.concat(newItem)
};
});
}
e.preventDefault();
}
deleteItem(key) {
var filteredItems = this.state.items.filter(function(item) {
return (item.key !==key);
});
this.setState({
items:filteredItems
});
}
render(){
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={this._inputElement} placeholder="enter task" type="text">
</input>
<button type="submit">add</button>
</form>
</div>
<TodoItems entries={this.state.items}
delete={this.deleteItem}/>
</div>
);
}
}
项目传到GitHub上，其地址：https://github.com/ThreeStonesLee/TodoList/
以上是关于React 小白之路—TodoList总结的主要内容，如果未能解决你的问题，请参考以下文章
react+redux官方实例TODO从最简单的入门-- 增
react入门，使用create-react-app搭建一个todolist-dome。