React组件上的onClick事件无法触发

Question

我正在处理一个组件存根，其中有一个瓷砖网格，每个都需要点击处理程序，以及一个具有不同点击处理程序的特定“新”瓷砖。我试图使点击处理程序正常工作，但事件似乎从未触发。

有什么想法吗？

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);
    }
});

- Fedoranimus

---

我将你的代码粘贴到基本的React JSFiddle中，看起来它运行良好（示例）。 - Michelle Tilley

你说得对。这很奇怪。现在我必须弄清楚为什么它在我的环境中不起作用。 - Fedoranimus

你是否在map调用中绑定了其他的onClick？如果你打算引用组件，一定要将this作为上下文传递，否则this将等于window：this.props.items.map(function() ..., this); - Ross Allen

你有收到任何控制台错误吗？ - Guilherme Nagatomo

你解决了这个问题吗？我也遇到了同样的问题，但控制台没有错误提示！！ - Vincenzo

Answer 1

正如评论者所提到的那样，您的代码在隔离环境中似乎按预期工作。

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

您是否在组件层次结构中添加了一些事件侦听器，并调用了event.stopPropagation()？ 如果您在React之外（例如本地或使用jquery）这样做，它将导致事件永远不会到达DOM的顶部，React将永远没有机会委托给您的方法。

- Sean Adkinson