react实现数据双向绑定

• react实现数据双向绑定要比vue麻烦了一点，需要手动进行数据更新。
• 以一个input为例，绑定一个state值，当input的值发生变化的时候，将input的值赋给state
• state发生变化的时候，input的值也会变化。

做一个简单的demo,有一个input，点击button将input添加到下方以列表的方式展示，点击重置，清空input值，点击列表的list删除点击的list。

• 将数据添加到数组中使用的是es6的扩展运算符。当然也可以使用传统的数组push方法。
  
  image.png

class Toder extends Component{
    constructor(){
        super();
        this.contentArr=[];
        this.state={
            contentArr:[],
            text:""
        }
    }
    addArray(){//添加
        this.setState({
            contentArr:[...this.state.contentArr,this.state.text]
        })
    }
    change(e){//改变
        this.setState({
            text:e.target.value
        })
    }
    reset(){//重置
        this.setState({
            text:""
        })
    }
    delItem(index){//删除
        let arr=this.state.contentArr;
        arr.splice(index,1);
        this.setState({
            contentArr:arr
        })
    }
    render(){
        return (
            <div style={{marginLeft:"50px"}}>
                <input type="text" value={this.state.text} onChange={this.change.bind(this)}/> 
                <button onClick={this.addArray.bind(this)}>添加</button>
                <button onClick={this.reset.bind(this)}>清空</button>
                <ul>
                     {/* 注释*/}
                    {
                        this.state.contentArr.map((item,index)=>{
                            return <li onClick={this.delItem.bind(this,index,item)} key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}