1

我有以下组件：

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

有任何想法吗？

4

1 回答 1

1

事实证明，在整个应用程序中使用两个不同的参数调用 require 是一个问题。

例如，在 bundle.js（应用程序的入口点）中，它是这样调用的：

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

但是在实际的反应组件文件中，它被加载了它的短名称，如下所示：

var React = require("react");

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

这是一个愚蠢的人为错误，但很容易犯，希望这可以在以后为某人节省一点悲伤。

于 2014-12-09T14:21:35.850 回答