受控组件与非受控组件
- 受控组件
在使用表单来收集用户输入时,例如<input>、<select>、<textarea>等元素都要绑定一个change
事件,当表单状态发生变化时,就会触发onChange
事件,更新组件的state。这种组件为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方法消息组件的局部状态,是整个状态可控。
受控组件更新state的流程:
- 可以通过初始state中设置表单的默认值
- 每当表单的值发生变化时,调用onChange事件处理器
- 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state
- 一旦通过setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新
受控组件的缺陷:
表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的值就必须每个都编写事件处理函数,这会让代码看起来很臃肿,所以为了解决这种情况,出现了非受控组件。
- 非受控组件
如果一个表单组件没有value或checked属性时,就是非受控组件。在非受控组件中,可以使用一个ref来获取DOM中的表单值,而不是为每个状态更新编写一个事件处理函数。
如下第一个<input>是一个非受控组件,它通过ref获取input输入框输入的值。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
页面中所有输入类的DOM如果是现用现取得称为非受控组件,而通过setState将输入的值维护到state中,需要时再从state获取,数据就受到了state得控制,这样的就是受控组件。