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

最新推荐文章于 2023-10-14 13:58:01 发布
最新推荐文章于 2023-10-14 13:58:01 发布
阅读量2.8k 收藏 4
点赞数
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyupeng1006/article/details/120671244
版权 
<li className="proviceLi" data-name="山东" onClick={(e)=>this.selectProvice(e)}>山东</li>

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

hyupeng1006
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
propene:JavaScript库创建对象属性到HTML元素状态的React性绑定
05-29
它自动将元素状态与新的属性值同步。安装节点在您的项目根目录中，运行： npm install propene网页在您的项目根目录中，运行： bower install propene介绍丙烯通过将对象属性绑定到DOM中元素的状态来工作。 要使用...
react获取原生html元素,怎么获取react的dom
weixin_36293915的博客
06-03 1333
怎么获取react的domReact提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用，其语法如下：import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);当组件被渲染到DOM中后，fin...
跟着设计哲学走:React数据绑定和获取,别闯红灯
weixin_34343689的博客
03-05 85
为什么80%的码农都做不了架构师？>>> ...
React点击事件获取组件值的三种方式
kaka的博客
10-11 1435
React点击事件获取组件值的三种方式
react 实现点击div外部触发事件
衣乌安、随笔
04-19 8949
大概思路是，为document绑定一个点击事件，判断事件触发对象(e.target)是否是 or 在指定div内部。 首先需要了解两个知识点： React ref属性 Node.contains() 利用ref属性获取div节点 constructor(){ this.divElement = null; } render() { return( &lt...
react知识点
fanym18的博客
05-27 388
React简单介绍 React来自于Facebook公司的开源项目，组件化模块化 通过虚拟dom减少与DOM的交互 （数据绑定），与已知的库或框架很好地配合。基于jsx的语法，使用XML标记的方式去直接声明界面， html js混写模式 React目录结构 React创建组件、 ReactJSX语法、 React绑定数据 React绑定对象 、React绑定属性( 绑定class 绑...
【06】基础知识：React组件实例三大核心属性 - ref
weixin_45559449的博客
10-14 502
执行 1+n*2 次，初次渲染和更新时执行（第一次null，第二次DOM元素），不会产生什么问题。
03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据
最新发布
03-01
这里，`map`函数遍历数组，`key`属性用于优化React的性能，`index`作为唯一标识符，而`item`是当前遍历到的数组元素。 以上是React开发中的基本技巧，理解和掌握这些将有助于你构建复杂的React应用。在实际项目中...
得到当前行的值的javascript代码
10-30
在JavaScript中，获取当前行的值通常涉及到处理HTML表格（`<table>`）的数据。这个场景常见于用户交互，比如当用户点击一个按钮时，我们可能需要获取他们所处的行的信息。标题和描述提到的“得到当前行的值的...
React实现双向绑定示例代码
09-01
在这个例子中，`valueLink`和`checkedLink`属性分别用于文本输入框和复选框，它们接收`linkState`方法返回的对象，该对象包含了`value`（对应当前状态值）和`requestChange`（用于更新状态的回调）。 ### 2. 自定义...
React实现点击删除列表中对应项
08-31
在本例中，通过`event.target.getAttribute("data-index")`获取`data-index`属性值，即要删除的列表项的索引。 4. **删除列表项**：在`delete`方法中，根据获取到的索引从`lists` state中删除对应的元素。初始尝试...
react: 点击获取当前元素的属性值
柒月小姐姐
08-13 1648
<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 3307
  前不久做react项目时遇到了一个问题：设置一个点击事件后，无法获取当前dom元素。   比如我想在点击下图中的“关闭”图标后，将这部分内容隐藏。   我刚开始是按照之前jQuery的写法去写的，代码如下： closeInfo=()=>{ $(this).parent().hide(); };   然而却没有达到我想要的效果，$(this)并没有获取到当前dom元素。   后...
td中a标签中onclick事件传值，js接值读取
m0_51935008的博客
08-11 926
开始的写法 ' <td> <a href="javascript:void(0);" onclick="delete1(item.fileName)";>文件下载</a></td>' function delete1(filename) { filename=encodeURIComponent(encodeURIComponent(filename)) 导致 无论点击拿个 删除的都是最后一个文件 更改 ' <t
React map遍历点击获取key
热门推荐
weixin_39168678的博客
04-11 1万+
React map遍历点击获取key值 在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作 首先准备一个需要遍历循环的集合，可以是键值对，也可以是数组， const fromIndex=[1, 2, 3, 4, 5]; JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果 所以新建一个对象，作为map结果的载体以便插...
React 初学实现 异步获取表格数据列表展示，点击事件（传参）实例
u011415782的专栏
11-20 1529
初涉传说中的 【React】 ，为了减少多种实现方式的迷惑出现，在此只展示我实际操作中使用的方式。 需求：就是在 React 语法下，点击表格中的数据，进行编辑、删除操作 涉及到对富文本数据的展示，可选择使用 dangerouslySetInnerHTML 进行转化 ...
react中的点击事件
wanghexiang1121的博客
09-07 3464
【代码】react中的点击事件。
react中获取选中行的数据
wl_sqfn的博客
07-13 2143
react中获取选中行的数据，并给对象中的属性赋值
React学习笔记
夏2同学的博客
05-28 861
1. 起步 # 创建项目 npx create-react-app project-name Vscode - React插件安装 添加该依赖后： rcc 和 rfc可以创建组件的方法 # 快速启动的代码块 rcc - react class component rfc - react fucntion component 1.1 Hello world // index.js import react from 'react' import ReactDOM from 'react-dom' i
react 点击获取id
08-04
### 回答1： 当用户点击 React 组件时，可以通过事件对象获取该组件的 ID。具体实现方式如下： 1. 在组件的 render 方法中，为组件添加一个 onClick 事件处理函数，如下所示： ``` render() { return ( <div onClick={this.handleClick}>点击我获取 ID</div> ); } ``` 2. 在事件处理函数 handleClick 中，通过事件对象 e 获取当前组件的 ID，如下所示： ``` handleClick(e) { const id = e.target.id; console.log(`当前组件的 ID 是：${id}`); } ``` 这样，当用户点击该组件时，控制台会输出当前组件的 ID。 ### 回答2： React 是一个用于构建用户界面的 JavaScript 库。在 React 中，我们可以通过使用事件处理函数来实现点击获取 id 的功能。 首先，在 React 组件中，我们需要定义一个状态（state）来存储 id 的值。可以使用 useState() 钩子来创建这个状态变量，代码如下： ``` import React, { useState } from 'react'; function MyComponent() { const [id, setId] = useState(''); const handleClick = (event) => { const { id } = event.target; setId(id); } return ( <div> <button id="button-1" onClick={handleClick}>按钮1</button> <button id="button-2" onClick={handleClick}>按钮2</button> <button id="button-3" onClick={handleClick}>按钮3</button> <p>点击的按钮 id 是：{id}</p> </div> ); } export default MyComponent; ``` 在上述代码中，我们定义了一个状态变量 id，并使用 useState() 初始化为空字符串。然后，我们定义了一个 handleClick() 函数，该函数接收一个事件对象作为参数。通过事件对象的 target 属性，可以获取到被点击的按钮元素，进而获取到该按钮的 id。最后，使用 setId() 方法将获取到的 id 值更新到状态变量 id 中。 在组件的 JSX 中，我们创建了三个按钮，并将 handleClick 函数传递给每个按钮的 onClick 属性。当用户点击某个按钮时，React 会自动调用 handleClick 函数，并传入一个事件对象。 最后，我们在一个段落（p）元素中展示了当前点击的按钮 id，通过插值{id}来显示状态变量 id 的值。 这样，当用户点击按钮时，React 会调用 handleClick 函数，将按钮的 id 传递给该函数，并更新组件的状态，从而实现了点击获取 id 的功能。 ### 回答3： 在React中获取点击的元素的id可以通过事件对象的target属性来实现。首先，在组件的render()方法中给需要绑定事件的元素添加一个onClick属性，将其绑定到一个处理点击事件的函数上，如下所示： ```jsx class MyComponent extends React.Component { handleClick = (event) => { const id = event.target.id; console.log('点击的元素id为：', id); } render() { return ( <div> <button id="button1" onClick={this.handleClick}>按钮1</button> <button id="button2" onClick={this.handleClick}>按钮2</button> <button id="button3" onClick={this.handleClick}>按钮3</button> </div> ); } } ``` 在上述代码中，我们给按钮元素添加了一个id属性来标识不同的按钮，同时将点击事件处理函数handleClick绑定到每个按钮的onClick属性上。 当用户点击某个按钮时，React会调用handleClick函数，并将一个event对象传入该函数。我们可以通过event.target获取到触发点击事件的元素，进而通过target.id获取到其id属性的值。 例如，当用户点击"按钮2"时，控制台会打印出"点击的元素id为：button2"。 需要注意的是，如果在点击事件的处理函数中需要使用组件的状态或方法，需要将处理函数声明为实例方法（使用箭头函数），或者在构造函数中使用bind()方法绑定this。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值