React-受控组件和非受控组件

最新推荐文章于 2025-10-16 14:59:50 发布

翻译最新推荐文章于 2025-10-16 14:59:50 发布 · 190 阅读

文章标签：

#react

React 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了React中的两种组件类型：受控组件和非受控组件。受控组件通过状态管理来实现对输入类数据的实时跟踪与控制；而非受控组件则允许开发者按需获取数据。

React受控组件和非受控组件

ps: 用于记录学习,持续更新

1. 受控组件
受控组件就像vue中的双向绑定的v-model 一样; 只不过react 的受控组件可以这样理解,就是输入类数据(输入框, 单选, 多选, 下拉框之类的), 可以维护到setState中, 可以实时获取到数据
比如下面:

class People extends React.Component {
	state = {
		userName: ''
	}
	userName = (event) => {
		this.setState({
			userName: event.target.value
		})
	}
	render () {
		return (
			<form> 
					<input onChange={this.userName} />
			</form>
		)
	}
}
ReactDOM.render(<People />, document.getElementById('app'))

2. 非受控组件
非受控组件可以理解为 即用即取