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 イベントがまったく発生しません。ボタンを含めるさまざまな方法を試しましたが、何らかの理由で、このボタンはイベントを発生させたくありません。ここで同様の例を見ることができますhttps://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/Footer.react.js#L48のように見える Flux TodoMVC サンプルアプリケーションで動作しますが、上記のコードでは何らかの理由で、クリック イベントがボタンに関連付けられていません。

何か案は？

4

1 に答える 1

1

これは、アプリケーション全体の中で、react の 2 つの異なる引数で呼び出された require の問題であることが判明しました。

たとえば、bundle.js (アプリケーションのエントリポイント) では、次のように呼び出されました。

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

しかし、実際の反応コンポーネント ファイルでは、次のように短い名前でロードされていました。

var React = require("react");

ここで起こっていることは、require が 2 つを完全に別個のロードとして (本来あるべきように) 扱っており、require("react") 呼び出しがさらに下のコンポーネントの 1 つで発生しているときに、元の React イベントをさらにセットアップして消去していることだと思います。 React ライブラリが 2 回読み込まれているため、チェーンを上に移動します。React は合成イベントを使用するため、イベントは DOM に存在しないため、React オブジェクトが 2 回目の読み込みで上書きされると、それらのイベントは失われます。

これはばかげた人為的ミスですが、簡単に犯すことができます。

于 2014-12-09T14:21:35.850 に答える