3

これについてすでに多くの質問があることは知っていますが、どれも私の問題に一致していないようです。

次のようにReact コンポーネントを作成してJQuery-UI dialog います。

var VehiclePlantDialog = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      this.props.closeDialog();
    },
    render: function () {
        return (
            <div>
                <form>
                    <input ref="inputText" />
                    <input type="submit" />
                    <button onClick={this.props.closeDialog}>Cancel</button>
                </form>
            </div>
        );
    }
});

var VehiclePlants = React.createClass({

    openDialog: function (e) {
        e.preventDefault();

        var myDialog = $('<div>').dialog({
            title: 'Dialog example',
            width: 400,
            close: function (e) {
                React.unmountComponentAtNode(myDialog);
                $(this).remove();
            }
        });

        var closeDialog = function (e) {
            e.preventDefault();
            myDialog.dialog('close');
        };
        $(document).ready(function () {
            ReactDOM.renderComponent(<VehiclePlantDialog closeDialog={closeDialog} />, myDialog);
        });
    },
    render: function () {
        return (
            <div>
                    <button onClick={this.openDialog}>Open dialog</button>
            </div>
        );
    }
});

これを含めるための私のejsファイルにjquery

<% script('/scripts/jquery.js') -%>
<% script('/scripts/jquery-ui.min.js') -%>

インクルードは機能しますが、ダイアログを開くボタンをクリックすると、コンソールdialog is not a functionに書き込むとコンソールに表示されます。 ここに画像の説明を入力

私を助けてくれる人はいますか？

注: Bower、Gulp、React、ReactDom、jqueryを使用していますjquery-ui

4

1 に答える 1

0

問題はセレクターにあると思います

$('<div>').dialog({

開発者ツールから $('') を調べてみてください。

これはうまくいくはずです

$("<div>My div content</div>").dialog({

編集 はい、あなたは正しいです。しかし、コードに問題はありません。すでに正常に動作しています。

このフィドルを確認してください

于 2016-05-27T12:40:11.370 に答える