react: 点击获取当前元素的属性值

最新推荐文章于 2024-07-17 16:12:58 发布

柒月小姐姐

最新推荐文章于 2024-07-17 16:12:58 发布

阅读量1.7k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_41401025/article/details/119679240

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<li className="proviceLi" data-name="北京" onClick={(e)=>this.selectProvice(e)}>北京</li>

selectProvice=(e)=>{
  console.log(e.currentTarget.getAttribute("data-name"))
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柒月小姐姐

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

（针对多个react版本）获取组件的dom元素/值

莫小猪的菜鸟进阶路

12-12

1149

工作中不免遇到各种react版本，获取dom元素/值是常见需求。所以今天针对目前的几个版本点提供不同的解决方案。欢迎留言讨论补充。感谢 ^ _ ^ 针对多个react版本 - 父组件获取子组件的dom元素/值 React 16.3版本以上第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现React 16.3版本以下第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现 React 16.3版本以上分两种情况：

React：组件实例三大属性之(refs)

Continue的博客

07-08

540

文章目录概述使用方式1.String类型的Refs(过时)2.回调形式使用概述作为react实例组件三大属性之一，refs主要用来获取真实DOM元素或者组件实例的属性。使用方式 1.String类型的Refs(过时) String类型的使用相对是很容易理解的，但是其存在一些问题已经过时不再推荐使用。 1.通过ref=“字符串名”进行ref声明 2.通过this.refs.字符串名获取 class MyComponent extends React.Component{ r

参与评论您还未登录，请先登录后发表或查看评论

React获取当前点击元素的属性值（标签上绑定值）

hyupeng1006的博客

10-09

3027

<li className="proviceLi" data-name="山东" onClick={(e)=>this.selectProvice(e)}>山东</li> selectProvice=(e)=>{ console.log(e.currentTarget.getAttribute("data-name")) }

初识react（3）——react点击事件如何获取当前dom元素

小R.的博客

03-31

3368

前不久做react项目时遇到了一个问题：设置一个点击事件后，无法获取当前dom元素。比如我想在点击下图中的“关闭”图标后，将这部分内容隐藏。我刚开始是按照之前jQuery的写法去写的，代码如下： closeInfo=()=>{ $(this).parent().hide(); }; 然而却没有达到我想要的效果，$(this)并没有获取到当前dom元素。后...

React 点击删除列表中对应项（React 获取DOM中自定义属性）

weixin_33798152的博客

01-10

714

点击删除按钮，删除列表中对应项本来是React比较基础的应用，可是应用情况变得复杂了以后，我还真想了一会儿才搞定。简化一下应用场景：点击新增按钮，增加一条输入框，点击输入框旁边的按钮，删除该输入框（不能删错了啊）。先说第一种方法问题刚上手，首先规划级别：一个输入框和对应删除按钮为一个子组件，整体为父组件即可方便处理。注意的点：生成的一坨输入...

react获取原生html元素,怎么获取react的dom

weixin_36293915的博客

06-03

1399

怎么获取react的domReact提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用，其语法如下：import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);当组件被渲染到DOM中后，fin...

React中获取元素(ref获取方式)

weixin_48601618的博客

04-11

4626

受控组件在react中,input标签的部分属性受到react控制,如onChange是基于input 和change 事件进行封装非受控组件对于没有经历过封装的一些属性或者方法,可以通过ref去获取这个dom元素,再去获取或触发其自身的属性和方法(这点的话和Vue是一样的) 获取方式在react的constructor生命周期内,使用React.createRef()进行绑定,即可获取到对应的dom元素 import React from 'react'; class Test extends R

start-react:学习React

03-27

受控组件的值由React组件控制，而非受控组件则允许用户直接操作DOM元素。 8. **React Router**：在构建多页面应用时，React Router是一个常用的库，用于管理应用的导航和URL，实现客户端路由。 9. **SCSS使用**：...

react三大核心属性-ref

qq_60976312的博客

06-24

552

react三大核心属性-ref的使用

React实现点击删除列表中对应项

08-31

在本例中，通过`event.target.getAttribute("data-index")`获取`data-index`属性值，即要删除的列表项的索引。 4. **删除列表项**：在`delete`方法中，根据获取到的索引从`lists` state中删除对应的元素。初始尝试...

react通过事件对象获取被点击的dom元素

weixin_30670965的博客

07-09

1885

1.通过bind获取事件对象获得被点击的dom元素 <p onClick={this.getVal.bind(this)}>这是p标签</p> getVal(event){ //获取被点击的dom对象 console.log(event.target); } 2.通过箭头函数获取被点击的dom元素（在箭头函数中传入e...

class react 获取_ReactJS，在React组件中按类名查找元素

weixin_34569101的博客

02-15

1525

小编典典您可以使用ReactDOM.findDOMNode。即使文档鼓励使用 ref ，我们也要看看它是如何工作的：findDOMNode()ReactDOM.findDOMNode(component)如果此组件已安装到DOM中，则将返回相应的本机浏览器DOM元素。此方法对于从DOM中读取值(例如表单字段值)和执行DOM测量很有用。在大多数情况下，您可以将引用附加到DOM节点，而完全避免使用fi...

react useState 赋值之后立即使用，发现没有获取到最新的值

最新发布

2401_85955297的博客

07-17

1399

React的usestate设置了值后马上打印获取不到最新值

react中的DOM元素属性

hello_helloworld的博客

07-17

381

一些关于React中的DOM元素属性：如何优雅、正确地在React中访问修改元素的属性；在react中如何自定义元素的属性。 HTMLDivElement、HTMLImageElement、data-name、data-xxx、getAttribute、classList、"HTMLElement 上面不存在属性classList"

React hooks使用useState异步回调获取不到最新值的问题解决

weixin_45961018的博客

05-22

1037

写hooks的朋友都会遇到的问题，在使用useState声明好的值时，发现该值总是上一次的数据，我也有同样的困扰，于是有了以下代码。

React系列-组件三大属性（ref）

zbl413845230的博客

07-20

201

字符串形式的ref class Index extends React.component{ showData=()=>{ const {input1}=this.refs; alert(input1.value) } //debbuger; 可以打断点 render(){ return ( <div> <input ref="input1" typ

js获取当前元素的属性和设置当前元素的属性

祎祎的博客

12-30

3547

js的dom的操作方法

React获取DOM和获取组件实例的方式

m0_71485750的博客

10-03

1万+

当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;

React获取与提交input值：两种方法解析

在这个组件中，我们定义了一个状态对象`state`，其中包含一个`InputValue`字段，用于存储input元素的当前值： ```jsx import React from 'react'; class InputDemo extends React.Component { state = { Input...