一、前言

在HTML中，表单元素例如 input , textarea , select 通常是根据用户的输入来维护它们自己的状态。
在React中，可变状态通常保存在 state 中，只能用 setState() 来进行更新操作

二、定义解释

正如上面所说，表单元素的数据可以由自身DOM元素来管理，也可以由React组件来管理

1.controlled_Component ( 受控组件 )

将表单状态保存在React组件中（state），呈现表单的React组件也会控制用户输入后所发生的情况。表单元素数据托管到React组件中的这种方式叫做 受控组件

React能控制

2.uncontrolled_Component ( 非受控组件 )

与受控组件相反，表单数据由dom元素自身管理的组件叫 非受控组件

React不能控制

三、栗子

1.controlled_Component ( 受控组件 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class App extends Component {
	constructor(){
		super()
		this.state={
			name:'姓名',
			text:'请输入'
		}
	}
	handleName(e){
		this.setState({
			name:e.target.value
		})
	}
	handleText(e){
		this.setState({
			text:e.target.value
		})
	}
	render(){
		return(
			<form method='get' action="/">
				<input type="text" name='name' value={this.state.name} onChange={this.handleName.bind(this)}/>
				<textarea name="text" value={this.state.text} onChange={this.handleText.bind(this)}></textarea>
				<input type="submit"/>
			</form>
		)
	}
}

可以看到 input 和 textarea的value值全都交给了React组件来管理。

注意 :
这种情况下每个表单元素必须要有 onChange 事件，这样用户每次操作对应的元素，对应元素数据才能得到改变

2.uncontrolled_Component ( 非受控组件 )

1
2
3
4
5
6
7
8
9
10
11
12
/*uncontrolled Component*/
class App extends Component {
	render(){
		return(
			<form method='get' action="/">
				<input type="text" name='name' defaultValue='姓名'/>
				<textarea name="text" defaultValue='想法'></textarea>
				<input type="submit"/>
			</form>
		)
	}
}

可以看到 input 和 textarea的value值全都是由自身DOM元素来管理的。

注意 :
非受控组件这功中，通常你需要指定表单元素的初始值，但不控制后续的更新，这种情况需要指定 defaultValue 属性，而不是 value属性
如果你不想让他有初始值，也可以不用写 defaultValue

三、两者优缺点？

name 优点 缺点
非受控组件 简练、操作数据的方式更简洁 表单验证 、选择性开启或者关闭按钮 等功能不能处理
受控组件 相比之下略显繁琐 表单验证 、选择性开启或者关闭按钮 等功能能轻松处理

所以通常情况下受控组件更能满足我们需求