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

Answer 1

正如评论者所提到的，您的代码看起来似乎是按预期的那样工作。

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

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

onClick事件不会在React Component上触发

1 个答案: