受控组件:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleTextareaChange = this.handleTextareaChange.bind(this);
this.state = {
inputValue: '',
textareaValue: '',
};
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value,
});
}
handleTextareaChange(e) {
this.setState({
textareaValue: e.target.value,
});
}
render() {
const { inputValue, textareaValue } = this.state;
return (
<div>
<p>单行输入框: <input type="text" value={inputValue} onChange={this.handleInputChange} /></p>
<p>多行输入框: <textarea value={textareaValue} onChange={this.handleTextareaChange} /></p>
</div>
);
}
}
- 每当表单的状态发生变化时,都会被写入到组件的 state 中,这种组件在React 中被称为受控组件(controlled component)。
- 在受控组件中,组件渲染出的状态与它的 value或 checked prop 相对应。 React 通过这种方式消除了组件的局部状态,使得应用的整个状态更加可控。
- React 官方同样推荐使用受控表单组件。总结下 React 受控组件更新 state 的流程:
(1) 可以通过在初始 state 中设置表单的默认值。(this.state={})
(2) 每当表单的值发生变化时,调用 onChange 事件处理器。
(3) 事件处理器通过合成事件对象 e 拿到改变后的状态,并更新应用的 state。this.setState({});
(4) setState 触发视图的重新渲染,完成表单组件值的更新。
- 在 React 中,数据是单向流动的。表单的数据源于组件的 state,并通过 props 传入,这也称为单向数据绑定。然后,我们又通过 onChange 事件处理器将新的表单数据写回到组件的 state,完成了双向数据绑定。
非受控组件
- 在 React 中,非受控组件是一种反模式,它的值不受组件自身的 state 或 props 控制。通常,需要通过为其添加 ref prop 来访问渲染后的底层 DOM 元素。