《三》受控组件和非受控组件-优快云博客

博客介绍了 React 中 HTML 表单的处理方式，有受控组件和非受控组件两种。受控组件的数据由 React 管理，state 是唯一数据源；非受控组件的数据由元素自身管理。React 建议多用受控组件，还说明了给非受控组件绑定初始值及获取数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 React 中，HTML 表单的处理方式和普通的 DOM 元素不太一样。

React 有两种不同的方式来处理表单输入元素：受控组件和非受控组件。

受控组件：

受控组件：表单元素的数据是由 React 来管理的。state 是表单元素的唯一数据源，并根据 setState()进行更新。

给 <input>、<textarea>、<select> 的 value 属性，<checkbox>、<radio> 的 checked 属性绑定 state，它们就会变成受控组件。

React 建议大多数情况下使用受控组件来处理表单数据。

class App extends React.PureComponent {
  state = {
    value: '这是受控组件'
  }

  handleChange = e => {
    // 调用 setState() 更新 input 的数据
    this.setState({value: e.target.value})
  }

  render() {
    const {value} = this.state
    //  this.state.value 维护 input 的数据
    return <input type='text' value={value} onChange={this.handleChange} />
  }
}

非受控组件：

非受控组件：表单元素的数据是由元素自己来管理的。表单元素自己维护数据，并根据用户的输入进行更新。

如果想给非受控组件绑定初始值，可以通过给 <input>、<textarea>、<select> 绑定 defaultValue 属性，<checkbox>、<radio> 绑定 defaultChecked 属性。
可以使用 ref 的方式来获取非受控组件的数据。

class ApP extends React.PureComponent {
	render() {
	   // input 自己维护数据，并根据用户的输入进行更新
	   return <input type='text' />
	 }
}