反应事件目标父节点 [英] react event target parent node

问题描述

是否可以在虚拟DOM上获取事件目标的父节点?

Is it possible to get the event target's parent node on the virtual DOM?

在我的基本react组件中，有一个方法是从onClick事件触发的，我想获取父虚拟DOM节点属性.

In my basic react component I have a method which is triggered from onClick event, I would like to get the parent virtual DOM node properties.

handleClick(e){ 
    // The following code only gives me the actual DOM parent Node
    ReactDOM.findDOMNode(e.target).parentNode 

}

推荐答案

是. React在虚拟DOM模型上工作，并且仅在需要时才会更新实际的Browser DOM. React中的事件也可以在虚拟DOM上运行，它们被称为合成事件.如果发现由于某种原因需要基础浏览器级别的事件，只需使用nativeEvent属性即可获取

Yes. React works on a virtual DOM model, and will update the real Browser DOM only if needed. The events in React work on a virtual DOM also and they are called synthetic events. If you find that you need the underlying browser level event for some reason, simply use the nativeEvent attribute to get it.

您可以从此处:

此外，此可能会有所帮助，并解释了虚拟Dom和浏览器DOM之间的区别.

Also, this may be helpful and explains the difference between the Virtual Dom and Browser DOM.

浏览器DOM只是on页面元素的抽象，而React DOM则是该抽象的抽象.

Browser DOM is just an abstraction of the on page elements, and React DOM would be an abstraction of that abstraction.

ReactDOM的render方法对于我们如何将React元素发送到浏览器DOM至关重要:

The render method of ReactDOM is crucial how we send React elements to Browser DOM:

var React = require('react');
var ReactDOM = require('react-dom');
var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));
        ^ 
        |---- Where React elements from React Virtual DOM enter the Browser DOM

在React中，我们正在处理React Elements和React Components.

In React we are dealing with React Elements and React Components.

由于React Element是DOM Element的虚拟表示形式，为了处理事件并捕获父项，您需要使用以下三种方式之一来创建React组件:

Since React Element is a virtual representation of a DOM Element, to work with the events and catch the parents, you need to create React Components either of these three ways:

例如，要在单击事件内导航父级，您可以检查以下内容:

To navigate the parent inside the click Event for instance you may check this:

 var parent = this._reactInternalInstance._currentElement._owner._instance;

REF:是否有和 http://jsfiddle.net/BinaryMuse/j8uaq85e/

这篇关于反应事件目标父节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！