react受控组件和非受控组件(此外也称约束组件)
React 中的受控组件和非受控组件是指表单元素(如 input、textarea、select 等)的两种不同管理方式。它们之间的主要区别在于状态的管理方式。
(图片来源网络,侵删)
受控组件(Controlled Components):
1、受控组件通过 React 组件的状态(state)来管理表单元素的值。
2、当用户与表单元素交互时,触发事件(如 onChange),更新 React 组件的状态,进而更新表单元素的值。
3、通过 React 组件的状态来控制表单元素的值,从而实现数据的双向绑定。
const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; return ( );
非受控组件(Uncontrolled Components):
1、非受控组件中,表单元素的值由 DOM 元素本身来管理,而不受 React 组件的状态控制。
2、通常通过 ref 来获取表单元素的值,而不需要通过 React 组件的状态来管理。
3、开发者需要手动处理表单元素的值,无法利用 React 的状态自动管理表单元素的值。
const inputRef = useRef(null); const handleClick = () => { const value = inputRef.current.value; // 处理表单元素的值 }; return ( Submit );
选择使用受控组件还是非受控组件取决于具体的需求和开发场景。通常情况下,推荐使用受控组件,因为它更符合 React 的单向数据流模型,便于状态管理和数据流控制。但在一些特定情况下,非受控组件也可以提供更简洁的解决方案。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。