3

我知道已经有很多关于此的问题，但似乎没有一个与我的问题相匹配。

我正在使用JQuery-UI dialog 它创建一个 React 组件，如下所示：

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 回答