2020/09/25 react中点击子节点获取当前子节点的父元素

最新推荐文章于 2023-02-18 10:23:20 发布
原创 最新推荐文章于 2023-02-18 10:23:20 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种方法，通过点击商品展示区域内的不同元素（如button、img、span等），来触发并捕获对应的块级元素事件。文章重点讨论了如何使用event对象及其currentTarget属性来实现这一功能。
  • 问题描述：在以下商品结束中点击任意部位，获取到这个块级元素的事件
    在这里插入图片描述
    -比如点button img span 都能够获取到每个商品的黄色大框

直接用event,currentTarget获取
在这里插入图片描述
-虽然只打出event看，currentTarget为null，但其实能够拿到这个值

React 子组件给父组件传值，父组件接收
小茳辞
10-27 819
react 子组件给父组件传值，父组件接收
react 子元素调用父元素的方法
qq_34756209的博客
05-10 3267
父元素的方法： getClusterList = () => { this.props.setTableData(instance.get('/后台地址', { params: { pageNum: this.pageNum, pageSize: this.pageSize } })); } 父元素使用子元素时代码： <Clust...
React中bind以及this处理,获取当前操作的元素
Oliver_web的博客
12-09 4030
1.点击发送的点击事件获取当前的dom元素,利用的上图中bind.第一个参数是当前操作的this,后面就是函数中需要用到的参数,这个根据应用场景确定的. 2.这函数中的打印的顺序就会发生变化,当前的对象总是放在函数的参数的最后一个进行输出.这样既可以获取想要的Dom,
vue 获取当前元素的父元素_react获取触发元素的属性 e.target.dataset
weixin_31181381的博客
12-31 1300
我的react项目中一个应用场景就是在点击一个元素的时候想要获取到这个元素的属性。代码如下：renderyear=()=>{ return( <div> <div data-value="年初">年初</div> </div> ); } //点击标签的时候触发的函数 TagCli...
初识react（3）——react点击事件如何获取当前dom元素
小R.的博客
03-31 3491
  前不久做react项目时遇到了一个问题：设置一个点击事件后，无法获取当前dom元素。   比如我想在点击下图中的“关闭”图标后，将这部分内容隐藏。   我刚开始是按照之前jQuery的写法去写的，代码如下： closeInfo=()=>{ $(this).parent().hide(); };   然而却没有达到我想要的效果，$(this)并没有获取到当前dom元素。   后...
父节点获取子节点的字符串示例代码
09-04
以下是如何在jQuery中实现父节点获取子节点字符串的示例： ```javascript $(document).ready(function(){ $("#btn").click(function(){ var str = $("#div_child").html(); alert(str); }); }); ``` 这段代码中...
javascript获取网页中指定节点的父节点、子节点的方法小结
10-27
为了实现这一目标，JavaScript提供了多种方法来获取DOM节点，这些方法包括通过document对象直接获取、通过父节点或子节点间接获取，以及通过临近节点获取等。 首先，通过document对象获取节点是最直接的方式。...
React如何将组件渲染到指定DOM节点详解
08-29
另外，我们需要确保在父元素被卸载的时候，改组件也要被卸载掉。 创建一个 RenderInBody 组件 为了实现将组件渲染到指定的 DOM 节点中，我们可以创建一个 RenderInBody 组件。该组件将在 componentDidMount 方法中...
05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
最新发布
03-01
在React开发中，掌握键盘事件、表单事件、事件对象以及如何通过ref获取DOM节点是至关重要的技能。这些知识点能够帮助我们构建交互性更强、用户体验更佳的应用。此外，了解如何在React中实现类似Vue的双向数据绑定是...
react如何通过子元素类名获取到他对应的父元素的父元素
06-06
在上述代码中，点击子元素时，通过`ReactDOM.findDOMNode(this)`获取到子元素的DOM节点，然后访问`parentNode.parentNode`即可获取到父元素的父元素的引用。注意，这种方式需要在组件中使用React的refs或者类名等...
react 获取获取dom
qq_49267744的博客
07-22 862
react 获取获取dom 如果子组件是 函数式组件,为了获取子组件的dom, 子组件需要使用 forwardRef 包起来, 把父组件的 的ref传递过去进行使用 import React, { createRef, forwardRef } from 'react' import ReactDOM from 'react-dom' const FocusInput = forwardRef((props, ref) => { return ( <div>
react中的——props.child获取组件中间的元素， React中的顶层Api方法克隆.cloneElement——遍历 React.Children.map
阿牛哥的博客
09-20 949
react中的——props.child获取组件中间的元素， React中的顶层Api方法克隆.cloneElement——遍历 React.Children.map
reactjs--子组件调用父组件的方法
热门推荐
web前端开发
10-10 1万+
1、页面中首先引入相关 js src="js/react.js"> src="js/react-dom.js"> src="js/browser.min.js"> src="js/jquery.min.js"> 2、此例子中:table组件为父组件，弹层组件为子组件 3、html代码 id="showHide">4、js代码 //列表组件 var PopShow = Reac
react中获取dom节点和全局上下文
weixin_50902154的博客
05-02 3323
同vue一样，说是尽量不操作dom,数据驱动视图，实际上免不了需要dom的时候 React.createRef(); 通过该api在构造器中创建一个用于绑定dom节点的变量 用于绑定dom节点的变量 通过.current来获取真实dom this.textInput.current.focus(); class CustomTextInput extends React.Component { constructor(props) { super(props); //..
react学习笔记(4)
mhc20201554114的博客
07-23 374
this.state是纯js对象，在vue中,data属性是利用object.defimeProperty处理过的，更改data的数据的时候会触发数据的getter和setter,但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setstate.状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)6.属性可以修改子组件的值，状态不可以。...
树结构数数据操作：根据子节点找到所有的父节点
qq_45706352的博客
06-22 1988
树，根据子节点查找父节点
React函数式组件传值（父子，兄弟，祖先等）以及父子之间方法的调用。
前端
09-20 1万+
react父子组件传值，以及父组件调用子组件的方法，子组件调用父组件的方法。
13【react高级指引（下）】
DSelegent的博客
10-30 599
13【react高级指引（下）】
React Hooks之useRef详解
RayShyy的博客
02-18 6508
useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值