React 小白之路—TodoList总结

标签：val   type   记录   ret   default   orm   filter   delete   component   

今天使用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总结

标签：val   type   记录   ret   default   orm   filter   delete   component   

原文地址：https://www.cnblogs.com/threestoneslee/p/9240599.html