响应事件目标父节点

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模型，仅在需要时才会更新真实的Browser DOM。 React中的事件也适用于虚拟DOM，它们被称为synthetic事件。如果由于某种原因发现您需要基础浏览器级别事件，只需使用nativeEvent属性获取it。

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

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

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

render ReactDOM方法对于我们如何将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 Elements和React Components。

由于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/