onClick 事件未在 React 组件上触发

IT技术 reactjs
2021-04-28 16:47:09

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

有任何想法吗?

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);
    }
});
1个回答

正如评论者所提到的,您的代码似乎可以单独按预期工作。

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

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