React 事件处理 ( this问题 参数传递 ref)

React事件的命名采用小驼峰方式(cameCase),而不是小写
使用JSX语法时你需要传入一个函数作为事件处理函数,而不是一个字符串
你不能通过返回false 的方式阻止默认行为。你必须显示式的使用preventDefault

在这里插入图片描述

1 this

需要谨慎对待JSX回调函数中的this可以使用:
● 公共属性(剪头函数)
● 匿名函数
● bind进行绑定
在这里插入图片描述

2 向事件处理程序传递参数

在这里插入图片描述

3 Ref

● Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建React元素
● 在React渲染生命周期时,表单元素上的value 将会覆盖DOM节点中的值,在非受控组件中,你经常希望React赋予组件一个初始值,但是不去控制后续的更新,在这种情况下,你可以指定一个defaultValue属性,而不是value

3.1 为DOM元素添加ref

可以使用ref去 存储DOM节点的引用 当ref属性用于HTML元素时,构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性

import React from './react';
import ReactDOM from './react-dom';
class Sum extends React.Component{
  numberA
  numberB
  result
  constructor(props){
    super(props);
    this.numberA = React.createRef();//{current:null}
    this.numberB = React.createRef();
    this.result = React.createRef();
  }
  handleClick = (event)=>{
    let numberA = this.numberA.current.value;
    let numberB = this.numberB.current.value;
    this.result.current.value = parseFloat(numberA)+parseFloat(numberB);
  }
  render(){
    return (
      <>
        <input ref={this.numberA}/>
        <input ref={this.numberB}/>
        <button onClick={this.handleClick}>+</button>
        <input ref={this.result}/>
      </>
    )
  }
}
ReactDOM.render(<Sum/>,document.getElementById('root'));

3.2 为class 组件添加ref

import React from './react';
import ReactDOM from './react-dom';
class TextInput extends React.Component{
  constructor(props){
    super(props);
    this.inputRef = React.createRef();
  }
  getTextInputFocus = ()=>{
    this.inputRef.current.focus();
  }
  render(){
    return <input ref={this.inputRef}/>
  }
}
class Form extends React.Component{
  constructor(props){
    super(props);
    this.textInputRef = React.createRef();
  }
  getFormFocus = ()=>{
    //this.textInputRef.current就会指向TextInput类组件的实例
    this.textInputRef.current.getTextInputFocus();
  }
  render(){
    return (
      <>
        <TextInput ref={this.textInputRef}/>
        <button onClick={this.getFormFocus}>获得焦点</button>
      </>
    )
  }
}

ReactDOM.render(<Form/>,document.getElementById('root'));

3.3 ref转发

● 不能在函数组件上使用ref 属性,因为他们没有实例
● ref转发是一项将ref自动的通过组件传递到其一子组件的技巧
● ref转发允许某些组件接收ref,并将其向下传递,(转发它给其他组件)

import React from './react';
import ReactDOM from './react-dom';
function TextInput(props,ref){
  return <input ref={ref}/>
}
const ForwardedTextInput = React.forwardRef(TextInput);
class Form extends React.Component{
  constructor(props){
    super(props);
    this.textInputRef = React.createRef();
  }
  getFormFocus = ()=>{
    //this.textInputRef.current就会指向TextInput类组件的实例
    this.textInputRef.current.focus();
  }
  render(){
    return (
      <>
        <ForwardedTextInput ref={this.textInputRef}/>
        <button onClick={this.getFormFocus}>获得焦点</button>
      </>
    )
  }
}

ReactDOM.render(<Form/>,document.getElementById('root'));
/**
Warning: 
Function components cannot be given refs. 
Attempts to access this ref will fail.
 Did you mean to use React.forwardRef()?
不能给函数组件添加ref
 * 
 * 
 */

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

再见,Anaconda的安装和配置老大难问题!

一、什么是Anaconda&#xff1f; 1. 简介 Anaconda&#xff08;官方网站&#xff09;就是可以便捷获取包且对包能够进行管理&#xff0c;同时对环境可以统一管理的发行版本。Anaconda包含了conda、Python在内的超过180个科学包及其依赖项。 2. 特点 Anaconda具有如下特点&a…

以太坊 Dencun 升级与潜在机会

撰文&#xff1a;Biteye 核心贡献者 Fishery Isla 文章来源Techub News专栏作者&#xff0c;搜Tehub News下载查看更多Web3资讯。 以太坊网络升级 Dencun 测试网版本在 2024 年 1 月 17 日上线了 Goerli 测试网&#xff0c;1 月 30 日成功上线了 Sepolia 测试网&#xff0c;D…

使用python构建Android,探索跨平台应用开发Kivy框架

使用python构建Android&#xff0c;探索跨平台应用开发Kivy框架 1. 介绍Kivy框架 Kivy是什么&#xff1f; Kivy是一个开源的Python跨平台应用程序开发框架&#xff0c;旨在帮助开发者快速构建创新的、可扩展的移动应用和多点触控应用。Kivy采用MIT许可证&#xff0c;允许开发…

ARM处理器运行Windows系统的三防加固平板|亿道三防

大家好&#xff01;今天我要为大家介绍一款引人注目的三防加固平板电脑——亿道三防系列产品。它们采用高通ARM处理器&#xff0c;并能够运行Windows 11操作系统&#xff0c;给用户带来了前所未有的强大性能和多样化的应用体验。 首先&#xff0c;让我们来聊聊这款平板电脑的核…

Leetcode155(设计最小栈)

例题&#xff1a; 分析&#xff1a; 题目要求我们必须在常数时间内检索到最小元素。 我们可以使用两个栈&#xff08;A、B&#xff09;来实现&#xff0c;A栈用来正常存储数据、弹出数据&#xff0c; B栈用于存储A栈中的最小元素&#xff0c;如下图&#xff1a; 刚开始&#…

spring-security 过滤器

spring-security过滤器 版本信息过滤器配置过滤器配置相关类图过滤器加载过程创建 HttpSecurity Bean 对象创建过滤器 过滤器作用ExceptionTranslationFilter 自定义过滤器 本章介绍 spring-security 过滤器配置类 HttpSecurity&#xff0c;过滤器加载过程&#xff0c;自定义过…

QT设置窗口随窗体变化(窗口文本框随窗体的伸缩)

目录 1.建立新窗口2.最终效果 1.建立新窗口 1&#xff09;在窗体中创建一个 textBrowser&#xff0c;记录坐标及宽高 X-100 Y-130 宽-571 高-281&#xff0c;窗体宽高800*600&#xff1b; 2&#xff09;在.h头文件中插入void resizeEvent(QResizeEvent *event) override;函数 …

行测:国考省考行测:图形推理,四面体,正六面体的图形推理方法,箭头唯一法

国考省考行测&#xff1a;图形推理 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#xff0c;而常规国考省考最重要的还是申论和行测&#xff0c;所以大家认真准备吧&#xff0c;我讲一起屡屡申论和行测的重要知识点 遇到…

使用Nginx或者Fiddler快速代理调试

1 背景问题 在分析业务系统程序问题时,存在服务系统环境是其它部门或者其它小组搭建或运维的,并且现在微服务时代,服务多且复杂,在个人机器上搭建起如此环境,要么费事费力,要么不具备充足条件。 急需有一种方法或者工具可以快速辅助调试定位分析问题。本文下面介绍代理方…

63-JQuery语法,选择器,事件,方法,遍历循环each

1.一个JS库,用js封装很多的方法放到一个文件里面,直接拿了用就可以 文件名带min是压缩过的不带min是没压缩过的 2.JQuery语法 通过选取HTML元素,并对选取的元素执行某些操作 基础语法:$(selector).action() <!-- 需要把JQuery文件先引入才能用 --><script src…

CentOS升级python

1、下载python39 https://mirrors.huaweicloud.com/python/3.9.0/Python-3.9.0.tgz2、拷贝到Linux环境&#xff08;当然也可以直接在Linux环境使用wget直接下载&#xff09; 先安装一下依赖&#xff0c;不然编译会有问题 sudo yum -y install zlib-devel bzip2-devel openssl…

类和对象 01【C++】

目录 一、 类的引入1. 类的定义2. 类的访问限定符及封装(1) 访问限定符(2) 封装 3. 类的实例化4. 类对象模型(1) 计算类对象的大小(2) 类对象的存储方式 5. this指针 二、 类的6个默认成员函数1. 构造函数2. 析构函数3. 拷贝构造函数4. 赋值运算符重载5. 取地址重载6. const取地…

Android13 针对low memory killer内存调优

引入概念 在旧版本的安卓系统中&#xff0c;当触发lmk&#xff08;low memory killer&#xff09;的时候一般认为就是内存不足导致&#xff0c;但是随着安卓版本的增加lmk的判断标准已经不仅仅是内存剩余大小&#xff0c;io&#xff0c;cpu同样会做评判&#xff0c;从而保证设备…

nc开发刚导入项目eclipse出现莫名其妙的错误,红叉,感叹号,文件missing

解决类出现红叉 解决感叹号&#xff0c;文件missing 其他问题 右上角的视图&#xff0c;要选择java&#xff0c;如果是javaEE也会有一些文件没有展示出来。

Py之pydantic:pydantic的简介、安装、使用方法之详细攻略

Py之pydantic&#xff1a;pydantic的简介、安装、使用方法之详细攻略 目录 pydantic的简介 1、Pydantic V1.10 vs. V2 pydantic的安装 pydantic的使用方法 1、简单的示例 pydantic的简介 pydantic是使用Python类型提示进行数据验证。快速且可扩展&#xff0c;Pydantic与您…

MT8788|MTK8788安卓核心板参数_4G联发科MTK模块

MT8788核心板是一款功能强大的4G全网通安卓智能模块。该模块采用了联发科AIOT芯片平台&#xff0c;具有长达8年的生命周期。MT8788模块内置了12nm制程的八核处理器&#xff0c;包括4个Cortex A73和4个Coretex A53&#xff0c;主频最高可达2.0GHZ。标配内存为4GB64GB&#xff0c…

ARM 之十六 详解 CMSIS 版本变迁、各组件使用示例

目前,CMSIS 已经发展到了第六版,其目录结构也发生了重大的变化。在不断发展中,很多原来 CMSIS 的组件被不断独立出去,并因此成立了很多开源社区,今天就来学习一下! 由于 CMSIS 已经包含了相当丰富的文档,因此,本文重点学习版本之间的变化以及一些实际使用示例。 什么是…

Stable Diffusion 绘画入门教程(webui)

文章目录 一、前言二、做出的效果三、SD使用流程1、大模型2、关键字3、调参数 一、前言 随着mj和sd绘画软件发布之后&#xff0c;AI绘画开始爆火&#xff0c;很多小伙伴已经挖掘出很多的玩法&#xff0c;哪怕最基础的AI美女、AI壁纸、真人漫改等等都赚的盆满钵满&#xff0c;当…

(十一)【Jmeter】线程(Threads(Users))之setUp 线程组

简述 操作路径如下: 作用:在正式测试开始前执行预加载或预热操作,为测试做准备。配置:设置预加载或预热操作的采样器、循环次数等参数。使用场景:确保在正式测试开始前应用程序已经达到稳定状态,减少测试结果的偏差。优点:提供预加载或预热操作,确保测试的准确性。缺…