反应事件目标父节点

Question

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

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

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

}

Answer 1

是的。 React 在虚拟 DOM 模型上工作，并且仅在需要时才会更新真实浏览器 DOM。 React 中的事件也在虚拟 DOM 上工作，它们被称为 synthetic events. If you find that you need the underlying browser level event for some reason, simply use the nativeEvent attribute to get it.

React Virtual DOM 中有一些限制，您可以从 here:

中了解到

此外，this 可能会有所帮助，它解释了虚拟 Dom 和浏览器 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 元素是 DOM 元素的虚拟表示，要处理事件并捕获父元素，您需要通过以下三种方式之一创建 React 组件：

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

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

REF： and http://jsfiddle.net/BinaryMuse/j8uaq85e/

反应事件目标父节点

react event target parent node

reactjs

virtual-dom