React中bind以及this处理,获取当前操作的元素

最新推荐文章于 2024-10-06 07:45:00 发布
最新推荐文章于 2024-10-06 07:45:00 发布
阅读量3.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OLiver_web/article/details/78757797
版权



1.点击发送的点击事件获取当前的dom元素,利用的上图中bind.第一个参数是当前操作的this,后面就是函数中需要用到的参数,这个根据应用场景确定的.

2.这函数中的打印的顺序就会发生变化,当前的对象总是放在函数的参数的最后一个进行输出.这样既可以获取想要的Dom,


一个橘子a
关注
React事件绑定模式：处理this的的五种方法
ass_ace
07-14 386
在React中至少有五种方法可以处理“this”上下文，而这五种方式主要根据es5、6、7的不同语法特性有如下的划分： 接下来 是对这五种方法的详细介绍： 1.使用es5的React.createClass 当使用es5时，React会自动帮助我们给每一个函数绑定“this”上下文，所以我们不再需要手动绑定。 var HelloWorld = React.createClass(...
React中获取元素(ref获取方式)
weixin_48601618的博客
04-11 4636
受控组件 在react中,input标签的部分属性受到react控制,如onChange是基于input 和change 事件进行封装 非受控组件 对于没有经历过封装的一些属性或者方法,可以通过ref去获取这个dom元素,再去获取或触发其自身的属性和方法(这点的话和Vue是一样的) 获取方式 在react的constructor生命周期内,使用React.createRef()进行绑定,即可获取到对应的dom元素 import React from 'react'; class Test extends R
2020/09/25 react中点击子节点获取当前子节点的父元素
Nighsloth的博客
09-25 1708
问题描述：在以下商品结束中点击任意部位，获取到这个块级元素的事件 -比如点button img span 都能够获取到每个商品的黄色大框 直接用event,currentTarget获取 -虽然只打出event看，currentTarget为null，但其实能够拿到这个值 ...
React获取DOM节点
最新发布
weixin_74261199的博客
10-06 243
传递过去（框架拿到这个容器后，就会将当前DOM存放进去）函数定义一个可以存放DOM的容器。② 将容器通过标签的。
react 获取指定表单对象中的对象的值
weixin_30555753的博客
05-11 972
const { getFieldValue } = this.props.form; getFieldValue("prefix") 转载于:https://www.cnblogs.com/handsomejunhong/p/9025572.html
React事件对象
qubuqimingzi的博客
06-01 232
React 事件对象
深入理解React中es6创建组件this的方法
09-01
本文将深入探讨在React中如何理解和处理`this`，以及在ES6类组件中`this`的绑定问题。 首先，`this`在JavaScript中是动态绑定的，它并不受作用域的影响，而是与函数的执行上下文紧密关联。在React中，当我们创建一...
04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值
03-01
在React中，处理事件、定义方法、获取和改变数据以及执行方法并传递参数是开发过程中不可或缺的部分。让我们深入探讨这些关键概念。 首先，React事件处理与传统的DOM事件处理有所不同。在React中，我们不直接在元素...
React实现点击删除列表中对应项
08-31
在示例中，`add`方法负责此操作，它将一个新的`List`组件添加到`lists`数组中，并为其分配一个唯一的`key`（通常是数组长度）以及一个`index`属性，用于标识其位置。 3. **事件处理**：删除按钮的点击事件需要传递...
React学习三（React的事件处理）
qq_44872688的博客
03-14 2135
文章目录一、React事件处理二、React中的事件处理函数1、使用ES6的箭头函数（1）在render中使用箭头函数（2）使用class fields语法2、在constructor函数中bind3、在render函数中使用bind4、注意三、事件处理中传参1、直接传递参数2、使用data属性 一、React事件处理       React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同： ①在React中事件的命名采用驼峰命名法，而
react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <input type="text" ref="myTextInput" /> <input type="button" value="Focus t
React 基础知识
zczdc的博客
05-31 241
React 基础 一、 React概述 1.1 什么是React React是一个用于构建用户界面的JavaScript库. 用户界面: HTML页面(前端) React主要用来写HTML页面,或构建Web应用 如果从MVC的角度来看. React仅仅是视图层(V) , 也就是只负责视图的渲染,而并非提供了 完整的M和C的功能。 React起源于Facebook的内部项目,用来架设Instagram的网站，并于2013年5月开源 1.2 react 的特点 1.声明式 你只需要描述UI ( HTML )看起
React获取DOM和获取组件实例的方式
m0_71485750的博客
10-03 1万+
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;
React中非受控组件-ref与受控组件理解
weixin_58207509的博客
11-07 430
内容 受控组件是通过 React 组件的状态来控制表单元素的值 非受控组件是通过手动操作 DOM 的方式来控制 此时，需要用到一个新的概念：ref ref：用来在 React 中获取 DOM 元素 非受控组件-ref ref的使用格式 步骤 导入方法。import { createRef } from 'react' 调用createRef方法创建引用，假设名为refDom。 const refDom = createRef() refD
在react组件中获取DOM元素的三种方式
qq_64917482的博客
06-28 652
2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。
React中获取DOM元素
qq_51130780的博客
07-08 1710
ref获取对应DOM元素对象
React中获取元素位置
热门推荐
MichaelAn的博客
09-22 2万+
React框架使用虚拟DOM代替真实的DOM来优化性能，使用props和state进行属性传递。所以说在react中直接获取DOM元素的位置是不合理的（不利于性能）。那么我们可以使用下面的API： document.documentElement.getBoundingClientRect Syntax oRect = object.getBoundingClientRect() //...
react合成事件的三种绑定方式bind
飞碟儿的博客
07-25 7659
在使用ES6 classes或者纯函数时，不存在自动绑定，需要我们手动实现this的绑定。 一 bind方法。这个方法可以绑定事件处理器内的this，并可以向事件处理器中传递参数，例： class App extends Component{ handleClick(e,arg){ console.log(e,arg); } render(){
JavaScript中this指向解析：DOM事件处理函数
这是一个非常重要的特性，因为它允许我们访问和操作触发事件的元素，甚至可以使用`this`来引用当前元素上的数据或方法。 例如，当一个按钮点击事件发生时，绑定到该按钮上的事件处理函数中的`this`通常指向该按钮...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值