ReactJs之表单处理

视图中肯定会用到表单的。

reactjs之表单

在form标签上绑定onSubmit方法，当button提交时触发。处理函数需要阻止默认提交。

props用来传递固定不变的对象，状态对象就需要用this.state来存储了。

input textarea select 标签绑定状态可以用value={this.state.xx}  

但是这样绑定预览时input是不能修改的。无法实现双向。可以用defaultvalue属性来绑定。

这样就可以修改了。但是input修改了。组件的状态属性来是原来的。

要想实现双向就需要绑定修改事件了onChange(峰式命名)。

事件中用e.target.value来获取值，并用this.setState()来修改。

radio checkbox的处理：

每个radio都需要绑定onChange事件

radio事件直接用值e.target.value  和this.setState来修改。

checkbox就麻烦了。

需要先获取value 和checked是否选中。

并得到当前状态的数组，用indexOf(value)来判断是否存在。

当选中并且不在数组中就concat(value)

当未选中且存在数组用splice(index,1)来删除。

最后setState修改数组。

当有很多的input select textarea时绑定事件就麻烦了。

这时可用refs.XX

在标签上添加ref="name"属性。

在submit上用this.refs.name.getDOMNode().value来获取值。

但radio checkbox还是需要用onchange事件的。