javascript - 任何想法为什么这个 react 组件按钮 onClick 不会被触发

Question

我有以下组件:

var React = require("react");

var CollectionsButtonActions = require("../actions/CollectionsButtonActions");


var CollectionsApp = React.createClass({
    getInitialState: function () {
        return {text: ''};
    },

    render: function () {
        var that = this;

        var buttonItem = <button
            onClick={this._handleButtonClick}
        >Test</button>;

        return (
            <div className="view">
                <div className="anchor">
                {buttonItem}
                </div>
                <div className="main">
                    <p>You currently don't have any collections set up,
                        <a href="/admin/collections/new">create one</a>
                        .</p>
                    <ul>
                    </ul>
                </div>
            </div>
        )
    },

    _handleButtonClick: function (event) {
        console.log('test');
        //CollectionsButtonActions.loadCollections();
    }
});

module.exports = CollectionsApp;

由于某种原因， _handleButtonClick 事件根本没有触发，我尝试了各种包含该按钮的方法，但由于某种原因，该按钮只是不想触发它的事件。我可以在这里看到类似的例子 https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/Footer.react.js#L48在 Flux TodoMVC 示例应用程序中，该应用程序似乎可以工作，但由于上述代码的某种原因，单击事件未附加到按钮。

有什么想法吗？

Answer 1

事实证明，这是一个问题，因为在整个应用程序中使用两个不同的参数调用 require 来进行 react 。

例如，在bundle.js(应用程序的入口点)中，它的调用方式如下:

var React = require('./node_modules/react/dist/react-with-addons');

但在实际的 react 组件文件中，它是用它的短名称加载的，如下所示:

var React = require("react");

我相信这里发生的事情是 require 将这两个负载视为完全独立的负载(正如它应该的那样)，并且当 require("react") 调用发生在更下面的组件之一中时，它会删除​​原始的 React 事件当 React 库被加载两次时，进一步设置链。因为 React 使用其合成事件，所以这些事件不在 DOM 中，因此当 React 对象在第二次加载时被覆盖时，这些事件就会丢失。

这是一个愚蠢的人为错误，但很容易犯，希望这可以在以后避免一些人的悲伤。