Question

我知道有很多关于这方面的问题，但似乎没有一个问题符合我的问题。

我正在使用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，$(document).ready(function(){ $('.date').mask('00/00/0000'); $('.time').mask('00:00:00'); $('.date_time').mask('00/00/0000 00:00:00'); });

Answer 1

我认为问题在于选择器

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

尝试从开发人员工具中检查$（''）。

可能应该这样做

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

修改是的，你是对的。但是你的代码没有问题。它已经工作正常。

请检查此fiddle

对话不是函数 - React

1 个答案: