IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 尚硅谷react课程-day04 -> 正文阅读

[JavaScript知识库]尚硅谷react课程-day04

目录

1、回调形式的ref

2、回调ref中调用次数问题

3、受控组件

4、非受控组件


1、回调形式的ref

1、利用react提供的ref属性名通过回调函数的属性值去调用节点自身

(currentnode)=>{this.input1=currentnode}其中需要传递的参数为当前节点这个是reat提供的方法调用的函数并将节点传递过来作为实参

<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

2、创建虚拟dom都是在类组件render方法中的那么我们利用ref获取过来的节点就能通过赋值挂载到类本身,然后对其属性值修改

2、回调ref中调用次数问题

只要页面setState值改变就会重新渲染页面,调用类组件render方法,但react中每一次渲染页面存在创建新实例清空refs值

?

[(32条消息) React] 核心属性refs—— 需要注意的问题_在全栈的路上打酱油的博客-CSDN博客

总结:组件内的标签可以定义ref属性来标识自己;尽量不用字符串形式的ref;createRef最为复杂但也是官方最推荐的

3、受控组件

表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验.必须要在表单上使用onChange事件来绑定对应的事件.

?

页面中所有输入类的dom随着用户的输入将数据实时保存到state状态里面去当我们需要使用state状态时就能直接调用出来

4、非受控组件

在虚拟DOM节点上声明一个ref属性去获取节点的value值,然后当表单提交完成就能直接调用submit函数获取到输入框的值并且弹框输出表单值,其更像是传统的HTML表单元素,数据存储在DOM中,而不是组件内部,获取数据的方式是通过ref引用

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-10-17 12:24:08  更:2022-10-17 12:26:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 19:23:38-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码