表单是应用必不可少的一部分,只要需要用户输入,哪怕是最简单的输入,都离不开表单。一直以来,单页应用中的表单都很难处理好,因为表单中充斥着用户变化莫恻的状态。在 react 中,表单的处理也与原生的 JS 处理方法稍有不同。在 react 中,表单组件有两种类型:受限组件(约束组件)和 不受限组件(无约束组件)。
受限组件
约束组件的模式与React 其他类型组件的模式一致。表单组件的状态交由React 组件控制,状态值被存储在React 组件的state 中。如果想要更好地控制表单组件,推荐使用约束组件。
先看下面一个例子
// 示例1
var MyForm = React.createClass({
render:function(){
return(
<input type='text' value='defaultText' />
);
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('example')
);
上面的代码将渲染出一个值为 defaultText
的 input 元素。用户在渲染出来的元素里输入任何值都不起作用,因为 React 已经赋值为 defaultText
。通过运行,我们在 chrome 浏览器中查看到如下结果:
在控制台打印出了一条 warning, 提醒我们设置了 value 的时候需要同时提供 onChange 事件,不然表单是只读的。因此如果想响应更新用户输入的值,就得使用 onChange 事件:
// 示例2
var MyForm = React.createClass({
getInitialState: function() {
return {inputValue: 'defaultText'};
},
handleInputChange:function(e){
this.setState({
inputValue: e.target.value
});
},
render:function(){
return(
<input type='text' value={
this.state.inputValue} onChange={
this.handleInputChange} />
);
}
});
ReactDOM.render(
<MyForm />,
document.getElementById('example')
);
示例 2 与示例 1 相比,最显著的变化就是<input/>
的值存储在父组件的 state 中,然后通过 onChange 事件去改变 state 。以下是示例2 的过程:
- getlnitialState 设置defaultValue 。
- < input/> 的值在渲染时被设置。
- < input/ > 的值onChange 时, change 处理器被调用。
- change 处理器更新state 。
- 在重新撞染时更新< input/> 的值。
虽然与无约束组件相比,代码量增加了不少,但是现在可以控制数据流,在用户输入数据时更新state 。
在示例2 的基础上,我们改变handleInputChange
,实现当用户输入时,把字符都转换成大写:
handleInputChange:function(e){
this.setState({
inputValue: e.target.value.toUpperCase()
});
},
你可能会注意到,在用户输入数据后,小写字符转成大写形式并添加到输入框时,并不会发生闪烁。这是因为React 拦截了浏览器原生的change 事件,在setState 被调用后, 这个组件就会重新渲染输入框。然后React 计算差异,更新输入框的值。
不受限组件
没有设置 value(或者设为 null) 的 <input>
组件是一个不受限组件。对于不受限的 <input>
组件,渲染出来的元素直接反应用户输入。不受限组件的最大的特点就是表单组件的值是不受React 组件控制的,而是由<i