2016-05-27 17 views
2

Ich weiß, dass es schon viele Fragen dazu gibt, aber keine von ihnen scheint zu meinem Problem zu passen.Dialog ist keine Funktion - Reagieren

Ich schaffe eine React Komponente JQuery-UI dialog Es sieht wie folgt aus:

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> 
     ); 
    } 
}); 

dieser Stelle wird in meiner ejs Datei für einschließlich jquery

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

Die gehören Werke aber, wenn ich auf auf der öffnen Sie den Dialog Taste, sagt die Konsole dialog is not a function, während wenn ich es in der Konsole schreiben tut es. enter image description here

Wer kann mir helfen?

Hinweis: Ich bin mit Bower, Gulp, React, ReactDom, jquery, jquery-ui

Antwort

0

denke ich, das Problem mit dem Selektor ist

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

try $ zu überprüfen ('') vom Entwickler Werkzeuge.

könnte sein, diese

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

EDIT funktionieren sollte Ja, Sie richtig sind. Aber es gibt kein Problem mit deinem Code. Es funktioniert schon gut.

dieses fiddle

+0

Bitte überprüfen Das gibt mir genau das gleiche Ergebnis. Also nein, es funktioniert nicht so – Tikkes

+0

@Tikkes Ich habe meine Antwort aktualisiert. Ja, ich habe mich geirrt. Der von Ihnen bereitgestellte Code funktioniert bereits. Ich habe jsfiddle damit erstellt. – Beniton

+0

Ich sehe, Sie haben Babel eingeschlossen, könnte dies das Problem sein, das ich hatte? Jedenfalls bin ich zu "React-Modal" übergegangen, aber wenn es so ist, werde ich deine Antwort akzeptieren – Tikkes