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 ❌ ✅