React 受控组件与非受控组件(木偶组件和智能组件)

在大多数情况下,我们推荐使用(木偶组件) 受控组件 来实现表单。

  • 受控组件(木偶组件): 表单数据由 React 组件处理
  • 非受控组件(智能组件): 表单数据由 DOM 处理
非受控组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 在非受控组件中接受单个属性
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>
);
}
}

默认值

在 React 的生命周期中,表单元素上的 value 属性将会覆盖 DOM 中的值。使用非受控组件时,通常希望 React 可以为其指定初始值。要解决这个问题,你可以指定一个 defaultValue 属性而不是 value

1
2
3
4
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />

<input type="checkbox"><input type="radio"> 支持 defaultChecked<select><textarea> 支持 defaultValue.

受控组件

适用范围:

  • 实时反馈, 如验证
  • 当所有的数据都验证通过之后, 按钮才能取消 disable 状态
  • 强制执行特定的输入格式,如信用卡号码
总结:

受控组件和非受控组件都有各自的优点, 评估你的实际情况去选择受控组件或者非受控组件. 如果你的表单在UI反馈方面非常简单,那么非受控组件就足够了.

feature uncontrolled controlled
one-time value retrieval (e.g. on submit)
validating on submit
instant field validation
conditionally disabling submit button
enforcing input format
several inputs for one piece of data
dynamic inputs