react 单向数据流出现的问题

todoadd的时候出现了错误

<input type="text" value={this.state.newItem} ref='addForm'/>
 <button onClick={this.addNewItem}>add</button>

很简单, 当 buttonclick的时候获取this.state.newItem然后 pushtodolist中, 然后更新视图, 然后发现报错

Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly

给了一个 value属性, 需要还需要给一个onChange时间去处理value, 如果你不给那就绑定defaultValue,再给一个readonly属性, 如果这个表单是个展示的话, 当然可以, 但是我需要修改并 push的, 所以定义一个onChange事件changeValue

// 这个函数要做的就是当用户输入的时候反过来将数据的数据同步到我定义的 value 上, 自己实现双向数据绑定,否则按钮点击的时候只能获取到定义的默认 value值
changeValue = e => {
 this.setState({newItem: e.target.value})
}

然后当按钮进行点击的时候再去获取this.state.newItem, 这个时候获取到的值就是和用户输入的值是同步的了

学习 react 的话一定要改变在 vue 中写代码的思想了, vuev-model一个值, 去修改 input的值话是会修改定义的默认值的, 而react不会, 所以这就是 react 的单向数据流导致的一个问题