React的refs和表单组件总结

news2024/12/24 0:36:38

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>
      <input
        ref={(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>
      <input
        ref={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>
          名字:
          <input
            value={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.coloradmin.cn/o/1191777.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pip 安装任意软件包报错

现象 使用 pip 命令时提示 查看源码 可以看到是从 pip 包中导入 main失败&#xff0c;点击查看目录 main 文件不见了&#xff0c;判断是文件缺失&#xff0c;重装 pip 即可 # python3 下载 pip curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py # python2 下载…

精密设备企业适合哪款CRM客户管理体系?

精密设备企业致力于打造现代化管理体系&#xff0c;以精密的仪器、精细的销售、精准的市场、精确的售后为企业核心&#xff0c;提供优质的精密产品和专业服务。随着企业的发展及市场发展需要&#xff0c;建立高效的客户关系管理体系势在必行。那么&#xff0c;精密设备企业适合…

C#医学检验室(LIS)信息管理系统源码

LIS:实验室信息管理系统 (Laboratory Information Management System简称:LIS)。 LIS 是面向医院检验科、检验中心、动物实验所、生物医疗研究所等科研单位研发的集数据采集、传输、存储、分析、处理、发布等功能于一体的信息管理系统。 一、完善的质控&#xff1a; 从样本管理…

Java 并发编程面试题——Condition 接口

目录 1.Condition 接口有什么作用&#xff1f;2.如何使用 Condition&#xff1f;3.Condition 中有哪些常用的方法&#xff1f;4.✨Condition 的底层实现原理是什么&#xff1f;4.1.等待队列4.2.等待4.3.通知 &#xff08;1&#xff09;参考书籍&#xff1a; 《Java 并发编程的艺…

学者观察 | 联邦学习与区块链、大模型等新技术的融合与挑战-北京航空航天大学童咏昕

导语 当下&#xff0c;数据已成为经济社会发展中不可或缺的生产要素&#xff0c;正在发挥越来越大的价值。但是在数据使用过程中&#xff0c;由于隐私、合规或者无法完全信任合作方等原因&#xff0c;数据的拥有者并不希望彻底和他方共享数据。为解决原始数据自主可控与数据跨…

Mysql 和 Redis 数据如何保持一致

先阐明一下Mysql和Redis的关系&#xff1a;Mysql是数据库&#xff0c;用来持久化数据&#xff0c;一定程度上保证数据的可靠性&#xff1b;Redis是用来当缓存&#xff0c;用来提升数据访问的性能。 关于如何保证Mysql和Redis中的数据一致&#xff08;即缓存一致性问题&#xf…

企业实施MES管理系统会增加哪些工作量

随着制造业的快速发展&#xff0c;越来越多的企业开始关注如何通过技术手段提高生产效率和质量。MES管理系统作为支撑企业生产管理的关键系统&#xff0c;受到很多企业的青睐。然而&#xff0c;对于是否部署MES管理系统&#xff0c;很多企业存在顾虑&#xff0c;担心其会增加工…

Python 3D建模指南【numpy-stl | pymesh | pytorch3d | solidpython | pyvista】

想象一下&#xff0c;我们需要用 python 编程语言构建某个对象的三维模型&#xff0c;然后将其可视化&#xff0c;或者准备一个文件以便在 3D 打印机上打印。 有几个库可以解决这些问题。 让我们看一下如何在 python 中从点、边和图元构建 3D 模型。 如何执行基本 3D 建模技术&…

overflow: auto滚动条跳到指定位置

点击对应模块跳转页面&#xff0c;滚动到对应模块&#xff0c;露出到可视范围 代码&#xff1a; scrollToCurrentCard() {// treeWrapper是包裹多个el-tree组件的父级元素&#xff0c;也是设置overflow:auto的元素let treeWrapper document.getElementsByClassName(treeWrapp…

Kafka JNDI 注入分析(CVE-2023-25194)

Apache Kafka Clients Jndi Injection 漏洞描述 Apache Kafka 是一个分布式数据流处理平台&#xff0c;可以实时发布、订阅、存储和处理数据流。Kafka Connect 是一种用于在 kafka 和其他系统之间可扩展、可靠的流式传输数据的工具。攻击者可以利用基于 SASL JAAS 配置和 SAS…

赞不绝口!飞凌嵌入式全新子品牌ElfBoard好评如潮

飞凌嵌入式凭借十多年的企业级板卡开发与服务经验&#xff0c;深挖嵌入式学习市场的需求和痛点推出全新子品牌ElfBoard&#xff0c;旨在为嵌入式学习爱好者创造更具价值的学习体验。 ElfBoard旗下ELF 1及ELF 1S两款新品已经上市1个月了&#xff0c;两款开发板产品凭借高性价比…

假如我们进入了时间循环,那么如何在时间循环里做最优决策?

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

温湿度监测更方便,食品物流很多都这样做!

在当今高度技术化的社会&#xff0c;温度监控不仅仅是一项科技应用&#xff0c;更是各行各业中确保稳定运作和产品质量的重要环节。 温度监控系统的应用不仅有助于维护生产条件&#xff0c;提高效率&#xff0c;还对确保产品质量和符合行业标准起着至关重要的作用。 客户案例 …

直播实时数仓基于DataLeap开放平台在发布管控场景的业务实践

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 背景 业务背景 随着字节业务的高速增长&#xff0c;业务场景越来越丰富&#xff0c;业务基于数据做的决策也越来越多&#xff0c;对数据的时效性要求也越来越高。…

CSDN中调整图片和文本样式

1.调整图片比例 插入图片后&#xff0c;觉得图片比例不协调&#xff0c;想改小点。只需要在文件后缀加个参数即可&#xff1a;?pic_center 60x。 NOTE&#xff1a;等号左边一定要加个空格&#xff0c;否则格式不生效 2.修改字体颜色 如上 NOTE&#xff1a;等号左边一定要…

搭建完全分布式Hadoop

文章目录 一、Hadoop集群规划二、在主节点上配置Hadoop&#xff08;一&#xff09;登录虚拟机&#xff08;二&#xff09;设置主机名&#xff08;三&#xff09;主机名与IP地址映射&#xff08;四&#xff09;关闭与禁用防火墙&#xff08;五&#xff09;配置免密登录&#xff…

Linux Centos配置邮件发送

Linux Centos配置邮件发送 这里使用的是外部发送邮件方式&#xff0c;也就是使用自己的账号发送 第一步 首先要开启STMP授权码&#xff0c;以QQ邮箱为例 配置文件 vim /etc/mail.rc找到之后在最下面添加如下 #邮箱set from3324855376qq.com #默认smtp发送&#xff0c;stmp…

简单聊聊java中各种常量池

一 引子 小试身手 首先我们来看一道题 Integer i1 127; Integer i2 127;System.out.println(i1 i2); //这种调用底层实际是执行的Integer.valueOf(127)&#xff0c;里面用到了IntegerCache对象池//值大于127时&#xff0c;不会从对象池中取对象 Integer i3 128; Integ…

4S店汽车行业万能通用小程序源码系统 在线预约试驾+购车计算器 源码完全开源可二次开发

随着互联网技术的发展和普及&#xff0c;越来越多的消费者开始依赖于互联网进行消费。传统的汽车销售模式也正在经历着数字化转型&#xff0c;以适应消费者需求的变化。这款小程序源码系统就是为帮助汽车4S店等销售商实现数字化转型而开发的。 以下是部分核心功能的代码模块&a…

合成数据在医疗保健行业的案例研究

从机器人辅助手术到医学成像技术&#xff0c;人工智能在医疗保健领域的应用正在迅速改变医疗保健行业&#xff0c;并改善服务成本和服务质量。例如&#xff0c;埃森哲表示&#xff0c;到 150 年&#xff0c;人工智能临床健康应用每年可以为美国医疗保健行业节省 2026 亿美元。 …