华清远见重庆中心学习-受控组件，非受控组件

最新推荐文章于 2024-08-15 14:22:43 发布
最新推荐文章于 2024-08-15 14:22:43 发布
阅读量140 收藏
点赞数
文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44768190/article/details/128828989
版权

受控组件 和 非受控组件（表单处理）

1、受控组件 ： 其值受到React控制的表单元素，当React元素的内容变化时state中的值也要发生变化。

如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变。

2、非受控组件

1、可以通过 Ref 转发来让组件受控

过程： 1、首先通过React.createRef() 创建转发对象

2、在React元素中设置ref属性 ，然后件已经创建好的转发对象赋值给设置了ref属性的React对象。

3、通过 对象.current 获取该React元素的DOM对象

【@浅沫°】
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
华清远见重庆中心-高级特效开发阶段学习总环
qq_51312610的博客
02-01 241
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
华清远见重庆中心学习分享
qq_44768190的博客
02-01 71
React
华清远见重庆中心-高级特效开发阶段总结
qq_46159009的博客
02-04 101
笔记
华清远见重庆中心——高级特效开发学习总结
m0_46547076的博客
02-02 147
react是一个用于构建用户界面的JavaScript库。JSX是JavaScript XML的简写,表示在JavaScript代码中写XML ( HTML )格式的代码。优势:声明式语法更加直观、与HTML 结构相同,降低了学习成本、提升开发效率以上就是对高级特效学习的基础知识总结，简单介绍了bootstrap，react的基本用法和一些简单的案例。
华清远见重庆中心—高级特效开发
m0_54033642的博客
02-01 160
/ 直接使用mixin函数.a{// 对mixin函数的形参赋值.b{// 赋值的另一种形式.c{组件是React的一等公民,使用React就是在用组件组件表示React实现的部分功能组合多个组件实现完整的页面功能特点:可复用、独立、可组合1、推荐：使用class的实例方法2、箭头函数3、bind1、组件的两种创建方式:函数组件和类组件2、无状态（函数）组件，负责静态结构展示3、有状态 (类) 组件，负责更新UI，让页面动起来4、绑定事件注意this指向问题。
华清远见重庆中心——高级特效开发笔记
m0_65710129的博客
02-01 241
rem是浏览器描述长度的单位，含义为：相对于 html 的字体大小的单位。1rem = html 根节点上1个字符的宽度将写好的代码文件进行编码和翻译sass 工具用于对 css 进行预编译，预编译的css内容，是一个 sass/scss 文件，文件中的语法，大部分和 css 相同，有一部分是预编译的语法。Get started with Bootstrap · Bootstrap v5 中文文档 v5.2 | Bootstrap 中文网 (bootcss.com)
华清远见重庆中心——高级特效
chpcqnu的博客
02-01 113
高级特效-react的使用
华清远见重庆中心——高级特效开发个人总结
m0_70747194的博客
02-01 132
react是一个用于构建用户界面的JavaScript库。
Vue 中的受控与非受控组件的实现
10-17
Vue中受控组件与非受控组件的实现是其组件设计模式的核心概念之一。理解它们之间的区别，可以帮助开发者更好地控制数据流和界面响应。 受控组件的概念源自于React框架，但在Vue中同样适用。受控组件是指那些其值由...
浅谈react受控组件与非受控组件(小结)
08-28
React 受控组件与非受控组件详解 React 中的受控组件和非受控组件是两种不同的表单组件类型，它们之间的区别在于是否可以由外部控制组件的值。本文将详细介绍受控组件和非受控组件的概念、特点和使用场景。 一、非...
浅谈React深度编程之受控组件与非受控组件
08-28
React 中的受控组件与非受控组件 React 中的组件可以分为受控组件和非受控组件两种。受控组件是指组件的值由状态（state）控制，而非受控组件的值则由用户输入控制。 受控组件是在 React 中一种特殊的组件，它的值...
React学习之受控组件与数据共享实例分析
10-15
在React开发中，受控组件（Controlled Components）和数据共享是两个重要的概念，它们对于构建可维护、可管理的应用程序至关重要。受控组件的概念源自于React如何处理表单元素的状态，而数据共享则涉及组件之间的...
大厂进阶之二：React高级用法HOC、Hooks对比、异步组件
franktaoge的博客
08-10 1130
本文分文三部分： - HOC高阶组件 higher order component - Hooks 16.8版本后新增的钩子API，手写自定义hooks - 异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载
React前端面试每日一试 8.什么是React Portals？
最新发布
weixin_42900858的博客
08-15 262
React Portals 是一种强大的工具，尤其在处理UI组件时，使你能够灵活地管理DOM节点的渲染位置，而不受限于React组件树的嵌套关系。通过合理使用Portals，你可以更轻松地构建复杂的UI组件，提高应用的用户体验.PS:但事件冒泡仍然会遵循React的组件树结构.
antd react echarts地图组件及使用
u010234868的专栏
08-12 387
antd react echarts地图组件及使用
React 中 react-i18next 切换语言（ 项目国际化 ）
muzidigbig的博客
08-12 431
首先在项目中安装i18n插件，然后将插件引入到项目，然后配置语言包（语言包需要你自己来进行配置，自己编写语言包，或者你能找到跟你项目适配的也可以），然后就用特定的方法来展示可以切换语言的字段。通过调用这个i18n changeLanguage(languageType) 这样一个方法就可以简单的修改我们当前的语言。3.4、 在reducer中要操作i18n的配置文件。：对 i18n 进行初始化操作及插件配置。config 中配置 切换语言。来完成语言配置的数据注入。，以存放国际化相关配置。
在react vue 项目中，打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出现 404 错误。
柠檬草的博客
08-12 292
其实只需要在app.s加一个监听就好，发现有错误就强刷界面，重新加载最新的js。
关于this的那些事
qq_30898861的博客
08-13 884
全局上下文：在全局作用域中，this指向全局对象。对象方法：作为对象方法调用时，this指向该对象。构造函数：使用new关键字调用时，this指向新创建的对象。普通函数：作为普通函数调用时，this指向全局对象。回调函数：作为回调函数调用时，this通常指向全局对象。箭头函数：箭头函数中的this值是从其外围作用域继承的，而不是由调用上下文决定的。希望这些解释和示例有助于您理解this的指向。如果您还有其他疑问或需要进一步的帮助，请随时提问。很好，既然您已经理解了this。
受控组件与非受控组件
04-16
受控组件和非受控组件是在React中常用的两种组件形式，它们主要用于处理表单元素的状态和值。 1. 受控组件： 受控组件是指由React来管理表单元素的状态和值的组件。在受控组件中，表单元素的值由组件的state来控制，并通过onChange事件来更新state的值。当用户输入时，React会更新state的值，并重新渲染组件，从而实现表单元素的交互。 示例代码： ```jsx class ControlledComponent extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> ); } } ``` 2. 非受控组件： 非受控组件是指表单元素的状态和值由DOM自身管理的组件。在非受控组件中，我们可以通过ref属性获取表单元素的值，而不需要通过state来管理。这种方式适用于简单的表单场景，但不适用于需要对表单值进行复杂操作或验证的情况。 示例代码： ```jsx class UncontrolledComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit(event) { event.preventDefault(); console.log(this.inputRef.current.value); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <input type="text" ref={this.inputRef} /> <button type="submit">Submit</button> </form> ); } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值