反应事件目标父节点答案

【问题标题】：react event target parent node反应事件目标父节点
【发布时间】：2017-06-15 12:01:28
【问题描述】：

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

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

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

}

【问题讨论】：

也许发布更多代码以及为什么需要这样做，因为可能有更好的方法。
点击事件触发一个模态，其填充的内容由传递的引用决定

标签： reactjs virtual-dom

【解决方案1】：

是的。 React 在虚拟 DOM 模型上工作，并且仅在需要时才会更新真实的浏览器 DOM。 React 中的事件也适用于虚拟 DOM，它们被称为synthetic 事件。如果你发现由于某种原因需要底层浏览器级别的事件，只需使用 nativeEvent 属性获取it即可。

您可以从here 中读取 React Virtual DOM 中的一些限制：

另外，this 可能会有所帮助，并解释了 Virtual Dom 和 Browser DOM 之间的区别。

浏览器 DOM 只是页面元素的抽象，而 React DOM 将是该抽象的抽象。

ReactDOM 的 render 方法对于我们如何将 React 元素发送到浏览器 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 元素和 React 组件。

由于 React Element 是 DOM 元素的虚拟表示，要处理事件并捕获父级，您需要通过以下三种方式之一创建 React 组件：

例如，要在 click 事件中导航父级，您可以检查以下内容：

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

参考：is there any way to access the parent component instance in React? 和 http://jsfiddle.net/BinaryMuse/j8uaq85e/

【讨论】：