受控组件：通过 state 或 props 控制表单元素状态的 react 组件，即每个状态突变都会有一个关联的处理函数。
特点
由state - 元素值控制的值绑定到状态变量需要事件处理程序 - 要更新状态，您需要事件处理程序可预测 - 由于组件状态代表输入值，因此组件是可预测的且易于调试react 处理输入数据，不依赖 dom 来跟踪当前输入值
import react, { usestate } from 'react';function controlledform() { const [value, setvalue] = usestate(''); const handlechange = (event) => { setvalue(event.target.value); }; return ( );}
不受控制的组件：react 组件，其中 dom 本身处理表单元素的状态。 react 通过 ref 访问输入值，ref 在内部存储自己的状态，并且您可以在需要时使用 ref 查询 dom 以查找其当前值。这有点像传统的 html。
特点
由 dom 控制的值 – 输入字段的值未绑定到状态变量。使用 ref 访问值或在需要时获取输入元素的值如果您不需要实时控制输入，它们的设置会更简单。适合不需要react state来控制输入的场景。
import React, { useRef } from 'react';function UncontrolledForm() { const inputRef = useRef(); const handleSubmit = (event) => { event.preventDefault(); alert('Input Value: ' + inputRef.current.value); }; return ( );}
这是受控组件和非受控组件之间的比较表：
何时使用
受控 - 用于实时验证、输入格式或即时反馈。
uncontrolled - 用于简单的用例，例如文件上传预填写的表单值不频繁或需要推迟到表单提交。
以上就是React 中的受控组件与非受控组件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499497.html
微信扫一扫 
支付宝扫一扫 
