快速了解React受控组件和非受控组件
最新回答
涟漪幽香
2026-03-06 12:32:11
受控组件
受控组件通过将表单元素的值与组件内部的state关联，实现了对用户输入行为的实时控制。当用户在输入框中输入内容时，输入框的值会自动反映在组件的state中，反之亦然，使得输入框内容与组件状态保持同步。实现这一功能的关键在于使用setState()方法更新state，并通过onChange事件捕获用户输入。然而，这种方式也存在局限性，尤其是在组件被作为共享组件使用时，调用方可能会失去对输入值的控制权，因此需要组件提供方让出控制权。
举个例子，如果要创建一个输入框组件作为受控组件，可以这样定义：
javascript
function ControlledInput() {
const [username, setUsername] = useState('');
const handleChange = (event) => {
setUsername(event.target.value);
};
return (
);
}
非受控组件
非受控组件则是在创建表单元素时，不通过state进行值的管理，而是直接通过ref或DOM操作来修改元素值。这种方式使得表单元素的值不受组件状态的控制，可以实现更灵活的DOM操作，但同时也失去了与组件状态之间的实时同步。
以下是一个非受控组件的示例：
javascript
function NonControlledInput() {
const inputRef = useRef(null);
const handleClick = () => {
// 直接修改输入框的值
inputRef.current.value = 'Hello, World!';
};
return (
>
Click to update value
>
);
}
总结
受控组件与非受控组件各有其应用场景。受控组件在需要实现数据实时同步和简化状态管理时更为合适，而非受控组件则适用于更灵活的DOM操作和特定场景下的需求。在实际开发中，根据项目的具体需求选择合适的方法进行表单数据的处理。
热门标签
