React非受控组件
2023-09-11 14:19:06 时间
(1)受控组件VS非受控组件
***1、受控组件中,表单数据是由 React 组件的state状态值来管理的***
***2、非受控组件,表单数据交由ref操作 DOM 节点来处理***
(2)受控组件
表单数据取决于state状态值,结合onChange事件进行操作,通过this.setState进行状态改变和监听
(3)非受控组件
表单将真实数据储存在 DOM 节点中
(4)特殊情况
input中type为file的控件始终为非受控组件,不能由代码绝对,应该是由用户操控
(5)小结
因为非受控组件将真实数据储存在 DOM 节点中,所以在使用非受控组件时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,
使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。
如果你还是不清楚在某个特殊场景中应该使用哪种组件,那么 这篇关于受控和非受控输入组件的文章 会很有帮助。
.
相关文章
- [转] 深入理解React 组件状态(State)
- 【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)
- 从零开始的react入门教程(五),了解react中的表单,何为受控组件与非受控组件
- 数字进度条组件NumberProgressBar
- React 多组件传值props和this
- react组件懒加载
- React -- State Hook 详细介绍(函数组件也可以使用state了)
- Android UI组件:布局管理器
- 《Effective Debugging:软件和系统调试的66个有效方法》——第15条:查看第三方组件的源代码,以了解其用法
- Android 有哪些组件UI
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- 浅谈react传入路由参数---withRouter组件
- React生命周期改善组件性能
- React值组件的三大特性
- react路由、NavLink组件封装
- 图片-滑动-解锁-组件-vue-canvas
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- 浅析Vue3新特性-Teleport(任意传送门也称瞬间移动):为什么需要Teleport、与React的Portals特性、如何使用(直接使用、与组件搭配使用、使用多个teleport)、teleport API(to及disabled使用介绍)
- React实践:Vite创建React项目、react事件传递参数的两种方式
- el-upload组件封装后更好用了