react制作todolist，方法一

步骤

 1、点击获取input值，把获取到的值放到一个数组里

constructor(props){
		super(props)
		this.state={
			str:'',
			arr:[]
		}
	}

//点击事件，添加数组	
	tap(){
		let arr1=this.state.arr;
		arr1.push(this.refs.ipt.value)	
		this.setState({arr:arr1})
		this.refs.ipt.value=''   //清空input内容
	}

2、把数组值遍历，显示在页面。注意react的特殊遍历方法，虽然没有vue的v-for简单

 <div>
	{
	   this.state.arr.map((item,i)=>{
			return (
				<div>
					{i}----{item}
					<button onClick={_this.del.bind(_this,i)}>删除</button>
				</div>
			)
	   })
	}
</div>

3、现在可以添加了，下面做一下删除，给button添加事件

onClick={_this.del.bind(_this,i)}

del(i){
		let arr2=this.state.arr;
		arr2.splice(i,1)
		this.setState({arr:arr2})
}

4、ok可以删除了

 

 

 完整代码：

 

class Demo extends React.Component{
	constructor(props){
		super(props)
		this.state={
			str:'',
			arr:[]
		}
	}
	
	tap(){
		let arr1=this.state.arr;
		arr1.push(this.refs.ipt.value)	
		this.setState({arr:arr1})
		this.refs.ipt.value=''
	}
	
	del(i){
		let arr2=this.state.arr;
		arr2.splice(i,1)
		this.setState({arr:arr2})
	}
	
	render(){
		console.log(this.state.arr)
		var _this=this;
		return(
			<div>
				<h1>TODOLIST</h1>
				<input type="text" ref="ipt"/>
				<button onClick={this.tap.bind(this)}>add</button>
				<hr/>
				<div>
					{
						this.state.arr.map((item,i)=>{
							return (
								<div>
									{i}----{item}
									<button onClick={_this.del.bind(_this,i)}>删除</button>
								</div>
							)
						})
					}
				</div>
			</div>
		)
	}
}

ReactDOM.render(<Demo/>,document.getElementById('out'))