当前位置：首页 > news >正文

React：受控组件和非受控组件

news 2025/8/7 7:36:26

受控组件和非受控组件

- - 受控组件
  - 非受控组件
  - 选择建议

受控和非受控指的都是 state，也就是指受 state 控制、不受 state 控制

受控组件

对于 input 输入框，如果使用 value 属性来接受状态值，并且配置 onChange 事件，那它就是受控组件，也就是受 state 控制，因此，它不能直接编辑（在 input 中就是无法直接更改输入框中的值）

function ControlledInput() {const [value, setValue] = useState('');return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

受控组件的数据流是双向的。在上面这个例子中，往输入框输入内容，会即时反映到视图上。我们会发现它跟 Vue 中的 v-model 有相似之处

要获取组件的值，直接使用 state 的值就可以了

以下是官方的定义

受控组件是指表单元素的值由 React 组件的状态（state）控制。用户输入时，值会通过事件处理函数更新状态，从而实现双向数据绑定。受控组件的值始终与 React 的状态同步，适用于需要对输入进行实时验证或处理的场景。

优点包括数据流清晰、易于验证和动态控制。缺点是代码量较多，尤其是表单复杂时，需要为每个输入字段编写事件处理逻辑。

非受控组件

当我们在 input 标签中使用 defaultValue 属性进行赋值时，那它就是非受控组件。与受控组件相反，非受控组件可以直接编辑组件的值

要获取非受控组件的值，需要通过 ref，也可以通过 getElementsById 来获取

非受控组件的值由 DOM 自身管理，而不是通过 React 状态控制。通常通过 ref 直接访问 DOM 元素的值，适用于简单表单或需要集成第三方库的场景。

<inputtype="text"defaultValue="初始值"ref={(input) => this.input = input}
/>

import React, { Component } from 'react';export class UnControll extends Component {constructor(props) {super(props);this.inputRef = React.createRef();}handleSubmit() {console.log(this.inputRef.current.value);}render() {return (<form onSubmit={(e) => this.handleSubmit(e)}><input defaultValue="123" ref={this.inputRef} /></form>)}
}