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

TO_WebNow

墨衍会员 · AI 创作全网分发码龄8年

关注

翻译最新推荐文章于 2026-07-07 11:50:28 发布 214 阅读 AI 写同款· GEO 优化 ›

React中受控组件和非受控组件详细使用说明这两种模式各有适用场景，理解它们的差异对于构建高效、可维护的表单至关重要。在 React 中，表单元素的状态管理方式分为。用户输入 → DOM。阅读详情

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. 非受控组件
非受控组件可以理解为 即用即取

收录于