react 表单（受控组件和非受控组件）

Posted 2021-03-17 ggbondlearn

 

我们知道表单元素与其他的普通DOM元素来说是不一样的，它们保存了自己的一些状态。

我们主要说的就是表单元素中的受控组件和非受控组件。

受控组件就是这个组件的状态是我们（react）控制的，这个组件的行为是完全受到我们控制的，所以叫做受控组件，比如：

 1 class NameForm extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.state = {value: ‘‘};
 5 
 6     this.handleChange = this.handleChange.bind(this);
 7     this.handleSubmit = this.handleSubmit.bind(this);
 8   }
 9 
10   handleChange(event) {
11     this.setState({value: event.target.value});
12   }
13 
14   handleSubmit(event) {
15     alert(‘A name was submitted: ‘ + this.state.value);
16     event.preventDefault();
17   }
18 
19   render() {
20     return (
21       <form onSubmit={this.handleSubmit}>
22         <label>
23           Name:
24           <input type="text" value={this.state.value} onChange={this.handleChange} />
25         </label>
26         <input type="submit" value="Submit" />
27       </form>
28     );
29   }
30 }

这个表单中的input的value是受到组件的state来控制的，并且元素的onChange也是受到组件的控制函数控制的，并且最终表单的提交也是收到组件的提交处理函数控制的。也就是说，组件任何状态的改变，都是收到一个相关的处理函数控制的。那么我们想想这种受控组件有什么优点和缺点，我们稍微想一下就是受控组件的话，优点就是一切都是可以控制的，缺点很明显，就是写起来比较麻烦，不过这也不算是缺点吧，毕竟要功能强大，肯定就需要自己定制呀。

非受控组件

在大多数情况下，我们推荐使用 受控组件 来实现表单。 在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件。

这句话大概说明了什么是非受控组件。我们看一个例子：

 1 class NameForm extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.handleSubmit = this.handleSubmit.bind(this);
 5   }
 6 
 7   handleSubmit(event) {
 8     alert(‘A name was submitted: ‘ + this.input.value);
 9     event.preventDefault();
10   }
11 
12   render() {
13     return (
14       <form onSubmit={this.handleSubmit}>
15         <label>
16           Name:
17           <input type="text" ref={(input) => this.input = input} />
18         </label>
19         <input type="submit" value="Submit" />
20       </form>
21     );
22   }
23 }

我们可以跟上面的受控组件做一个下比较，首先直观上看，我们的代码量少了一点，那么具体哪里少了呢，就是我们不需要对input的onChange事件进行函数处理，我们也没有保存input的value的state，所以这个组件的状态是由它自己保存的，我们可以在需要的时候通过ref获取到，比如在submit的时候。有时候我们需要给组件加上默认值，受控组件很容易做到，就是给state初始化的时候给一个默认值，但是非受控组件怎么弄呢？这里有一个属性叫做defaultValue我们给input传入这个属性就可以修改它的初始值了。（checkbox 和 radio 是defaultChecked）

那么我们到底该如何选择使用受控组件还是非受控组件呢？
我也不是特别明确，看了一些别人写的文章，我的理解是：当我们需要实时的控制组件的状态（包括样式，值等），我们就应该使用受控组件，如果我们只是需要在提交的时候获取一下值什么的，我们可以选择使用非受控组件。

还有一个特殊的东西，就是<input type=‘file‘>，这种组件只能是非受控组件，因为它的value属性是只读的，只能够受用户控制，我们没法主动去控制。