onClick 事件未在 React 组件上触发答案

【问题标题】：onClick event isn't firing on React ComponentonClick 事件未在 React 组件上触发
【发布时间】：2014-08-11 16:20:20
【问题描述】：

我正在开发一个组件存根，其中有一个图块网格，每个图块都需要一个单击处理程序，以及一个具有不同单击处理程序的特定“新”图块。我正在尝试让点击处理程序正常工作，但该事件似乎永远不会触发。

有什么想法吗？

var grid = React.createClass({
    onCreateNew: function () {
        console.log("onCreateNew");
    },
    render: function () {
        var tiles = [];
        if (this.props.items) {
            tiles = this.props.items.map(function (item, index) {
                //create a tile for each item
            });
        }
        //always append "new" tile for the last one
        tiles.push(React.DOM.div({
            onClick: this.onCreateNew, className: "tile new_tile"
        },
            React.DOM.div({ className: "plus", onClick: this.onCreateNew }, "+")
        ));            
        return React.DOM.div({ id: "flowsheetPane" }, tiles);
    }
});

【问题讨论】：

我将您的代码粘贴到 base React JSFiddle 中，它似乎工作正常 (example)。
你是对的。这很奇怪。现在我必须弄清楚为什么它在我的环境中不起作用。
这个组件嵌套几个子级有关系吗？
您是否在map 调用中绑定了另一个onClick？如果您打算引用组件，请务必将this 作为上下文传递，否则this 将等于window：this.props.items.map(function() ..., this);
您是否收到任何控制台错误？

标签： reactjs

【解决方案1】：

正如评论者所提到的，您的代码似乎在孤立的情况下按预期工作。

React 在 DOM 的根部使用单个事件侦听器委托事件处理程序，因此事件需要一直传播到顶部，以便 React 调用您的函数。

您能否在组件层次结构中的某处添加一些事件侦听器来调用event.stopPropagation()？如果您在 React 之外执行此操作（例如，本机或使用 jquery），它将导致事件永远不会到达 DOM 的顶部，并且 React 将永远没有机会委托给您的方法。

【讨论】：