React的refs和表单组件总结

React的refs和表单组件

react中refs的使用字符串形式的ref

react核心就在于虚拟DOM,也就是React中不总是直接操页面的真实DOM元素,并且结合Diffing算法,可以做到最小化页面重绘,但有些时候不可避免我们需要一种方法可以操作我们定义的元素标签,并作出对应的修改,在React中提供了一种访问Dom节点的方式,也就是refs,组件中的标签可以通过定义ref属性来标识自己。

基本使用

import React from "react"
class App extends React.Component{state = {isWash:false}popClick=()=>{console.log("popClick",document.getElementsByTagName("input")[0].value)// console.log(this);const { inputRef } = this.refs;console.log("popClick",inputRef.value)}render(){return(<><input type="text" ref="inputRef" placeholder="请输入内容" /><button onClick={this.popClick}>点击获取内容</button></>)}
}
export default App

react中refs的使用字符串形式的ref

react中refs的使用回调形式的ref

在react单项数据流中,props是父组件与子组件交互的唯一方式,要修改一个子组件,一般只能通过props重新渲染,在某些情况下,需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个React组件实例,也可能是一个DOM元素,ref属性附加到React元素上,以便访问。

  1. 使React.createRef()方法创建一个ref对象实例,附加到HTML元素上,接受底层DOM元素座位其current属性。
  2. 挂载到Class组件上,其current指向该类组件实例。
  3. 不能挂载到函数组件上,因为函数组件没有实例。 不仅可以使用react.createRef()方法创建ref实例引用react元素,还可以使用一个回调函数,绑定react元素。
import React from "react"
class App extends React.Component{state = {isWash:false}popClick=()=>{console.log("popClick",this.inputRef.value)}render(){return(<><input type="text" ref={(e)=>{this.inputRef=e}} placeholder="请输入内容" /><button onClick={this.popClick}>点击获取内容</button></>)}
}
export default App

React的refs和表单组件

关于回调ref调⽤的次数

如果ref会点函数是以内联函数的方式定义的,在更新过程中它会被执行两次,通过将ref的回调函数定义为class的绑定函数。

import React from "react"
class App extends React.Component {state = { xd: true }popClick = () => {console.log(this.input1.value);        }handleClick = () => {this.setState({ state: !this.state.xd });}render() {return <div><inputref={(a) => ((this.input1 = a), console.log(11))}type="text"placeholder="请输⼊内容"/><button onClick={this.popClick}>点击⽣成弹窗</button><button onClick={this.handleClick}>点击更新组件</button></div>}
}
export default App

关于回调ref调⽤的次数

使用createRef创建ref

createref是使用React.createRef()创建的,并通过ref属性附加到react元素,在构造组件时,通常将refs分配给实例属性,以便在整个组件中引用他们,React.create()调用后可以想象成创建一个容器,这个容器可以存储被ref标识的元素节点,创建一个容器只能绑定一个节点,绑定多个节点会被覆盖。

import React from "react"
class App extends React.Component {state = { xd: true }inputRef = React.createRef()popClick = () => {console.log(this.inputRef.current.value);        }handleClick = () => {this.setState({ state: !this.state.xd });}render() {return <div><inputref={this.inputRef}type="text"placeholder="请输⼊内容"/><button onClick={this.popClick}>点击⽣成弹窗</button></div>}
}
export default App

使用createRef创建ref

react受控组件和非受控组件

受控组件

React中受控组件是指表单元素的控制交给React,表单元素的值是完全交由组件的state控制。组件内部维护state,state属性和表单元素的值建⽴依赖关系,再通过onChange事件与setState()结合更新state属性,就能达到控制⽤户输⼊过程中表单发⽣的操作,控制取值的表单输⼊元素就叫做受控组件(类似vue的数据双向绑定)

非受控组件

非受控组件是指表单元素的状态并不受React组件状态的影响,表单元素的值存储与DOM元素中,如果要React组件要获取DOM元素的值,需要通过绑定ref的方式去获取。

受控组件示例

import React from "react"
class App extends React.Component {handleSubmit = (e) => {e.preventDefault();console.log(this.name.value);};render() {return <div><form onSubmit={this.handleSubmit}><label>名字:<input type="text" ref={(a) => (this.name = a)} /></label><button type="submit">提交</button></form></div>}
}
export default App

受控组件示例

非受控组件示例

import React from "react"
class App extends React.Component {state = { value: "传玉昨天去洗脚了" };handleChange = (event) => {console.log(event.target.value);this.setState({ value: event.target.value });};handleSubmit = (e) => {// 禁⽌表单的默认刷新e.preventDefault();console.log(this.state.value);};render() {return <div><form onSubmit={this.handleSubmit}><label>名字:<inputvalue={this.state.value}type="text"onChange={this.handleChange}/></label><button type="submit">提交</button></form></div>}
}
export default App

非受控组件示例

剖析React中的Diffing算法

框架中为什么要使用虚拟DOM?Diffing算法原理是什么?

当数据改变时,react会生成新的虚拟dom和旧的虚拟dom进行对比,有不同的节点则重新生成,节点相同则进行复用,不重新生成提高渲染速度。

便利数组渲染数据时,为什么要加key属性,使用index座位key会有什么问题?

key主要用在vue虚拟DOM,类似js对象格式的数据的diff算法,新旧虚拟DOM进行对比,复用不变的旧节点,渲染改变的节点,提高渲染速度,遍历数组不加key属性时,则默认使用数组的索引index,在数组元素顺序打乱时,会产生不必要的DOM更新。key值要使用唯一的id值。

react中的ref使用完结~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/174393.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux文件描述符+缓冲区

Linux文件描述符缓冲区 &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了文件描述符以及文件描述符…

快乐数问题

编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果这个过程 结果为 1&#xff…

什么是会话固定以及如何在 Node.js 中防止它

什么是会话固定以及如何在 Node.js 中防止它 在深入讨论之前&#xff0c;我们需要了解会话是什么以及会话身份验证如何工作。 什么是会话&#xff1f; 正如我们所知&#xff0c;HTTP 请求是无状态的&#xff0c;这意味着当我们发送登录请求时&#xff0c;并且我们有有效的用…

office365 outlook邮件无法删除

是否遇到过&#xff0c;office365邮件存储满了&#xff0c;删除邮件无法删除&#xff0c;即便用web方式登录到outlook&#xff0c;删除邮件当时是成功的&#xff0c;但一会儿就回滚回来了&#xff0c;已删除的邮件&#xff0c;你想清空&#xff0c;最后清理后还是回到原样。 请…

Opencv for unity 下载

GitHub - EnoxSoftware/VideoPlayerWithOpenCVForUnityExample: This example shows how to convert VideoPlayer texture to OpenCV Mat using AsyncGPUReadback. OpenCV for Unity | Integration | Unity Asset Store

强化学习:原理与Python实战||一分钟秒懂人工智能对齐

文章目录 1.什么是人工智能对齐2.为什么要研究人工智能对齐3.人工智能对齐的常见方法延伸阅读 1.什么是人工智能对齐 人工智能对齐&#xff08;AI Alignment&#xff09;指让人工智能的行为符合人的意图和价值观。 人工智能系统可能会出现“不对齐”&#xff08;misalign&…

Oracle(18)Auditing

文章目录 一、基础知识1、审计介绍2、Auditing Types 审计类型3、Auditing Guidelines 审计准则4、Auditing Categories 审核类别5、Database Auditing 数据库审计6、Auditing User SYS 审计sys用户7、Getting Auditing Informatio 获取审计信息8、获取审计记录通知 二、基础操…

postgresql实现job的六种方法

简介 在postgresql数据库中并没有想oracle那样的job功能&#xff0c;要想实现job调度&#xff0c;就需要借助于第三方。本人更为推荐kettle&#xff0c;pgagent这样的图形化界面&#xff0c;对于开发更为友好 优势劣势Linux 定时任务&#xff08;crontab&#xff09; 简单易用…

Python入门教程:12个常用基础语法详解

文章目录 前言1.多个字符串组合为一个字符串2. 字符串拆分为子字符串列表3. 统计列表中元素的次数4.使用try-except-else-block模块5. 使用枚举函数得到key/value对6. 检查对象的内存使用情况7. 合并字典8. 计算执行一段代码所花费的时间9. 列表展开10. 列表采样11. 数字化12. …

如何解决网页中的pdf文件无法下载?pdf打印显示空白怎么办?

问题描述 偶然间&#xff0c;遇到这样一个问题&#xff0c;一个网页上的附件pdf想要下载打印下来&#xff0c;奈何尝试多种办法都不能将其下载下载&#xff0c;点击打印出现的也是一片空白 百度搜索了一些解决方案都不太行&#xff0c;主要解决方案如&#xff1a;https://zh…

基于ubuntu 22, jdk 8x64搭建图数据库环境 hugegraph--google镜像chatgpt

基于ubuntu 22, jdk 8x64搭建图数据库环境 hugegraph download 环境 uname -a #Linux whiltez 5.15.0-46-generic #49-Ubuntu SMP Thu Aug 4 18:03:25 UTC 2022 x86_64 x86_64 x86_64 GNU/Linuxwhich javac #/adoptopen-jdk8u332-b09/bin/javac which java #/adoptopen-jdk8u33…

如何在Jupyter Lab中安装不同的Kernel

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…