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

有什么想法吗？

Answer 1

结果证明，需要使用两个不同的参数调用require以在整个应用程序中进行响应。

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

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

但是在实际的反应组件文件中，它正在加载它的简称，如下所示：

var React = require("react");

我相信这里发生的事情是需要将两者视为完全独立的负载（应该如此）以及何时需要（＆＃34;反应＆＃34;）呼叫正在其中一个中发生当React库被加载两次时，它将擦除原始React事件的组件进一步向上设置。因为React使用其合成事件，所以事件不在DOM中，所以当第二次加载时覆盖React对象时，这些事件就会丢失。

这是一个愚蠢的人为错误，但很容易制作，希望这会让人稍后有点悲伤。

任何想法为什么这对组件按钮onClick的反应都不会被触发

1 个答案: