Materialize css --Select-- funktioniert nicht in reagieren

Ich benutze grundlegende materialisieren css und aus irgendeinem Grund, auch wenn ich es direkt von der materializecss.com Website kopieren meine ausgewählte Option zeigt nur das Etikett und nichts anderes ist da.Materialize css --Select-- funktioniert nicht in reagieren

EDIT hinzugefügt Index.hjs Seite für Referenz von Skripten.

In meinem index.hjs hier sind alle meine Importe für die materialisieren css:

<!DOCTYPE html> 
<html> 

<head> 
    <title>{{ title }}</title> 
    <link rel='stylesheet' href='/stylesheets/style.css' /> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

</head> 

<body> 
    <div id="root"></div> 

    <!--Import jQuery before materialize.js--> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
    <script type="text/javascript" src="/build/bundle.js"></script> 
</body> 

</html>

Hier ist der Code:

 <div> 
     <div className="row"> 
      <div className="input-field col s12 m6"> 
      <input 
       onChange={this.updateTask.bind(this)} 
       id="title" 
       type="text" 
      /> 
      <label htmlFor="title">Title</label> 
      </div> 
     </div> 
     <div className="row"> 
      <div className="input-field col s12 m6"> 
      <input 
       onChange={this.updateTask.bind(this)} 
       id="description" 
       type="text" 
      /> 
      <label htmlFor="description">Description</label> 
      </div> 
     </div> 
     <div className="row"> 
      <div className="input-field col s12"> 
      <select id="category" onChange={this.updateTask.bind(this)}> 
       <option value="" disabled selected> 
       Choose your category 
       </option> 
       <option value="delivery">Delivery</option> 
       <option value="dog walking">Dog Walking</option> 
       <option value="house cleaning">House Cleaning</option> 
      </select> 
      <label>Category</label> 
      </div> 
     </div> 
     <div className="row"> 
      {/* <button 
      onClick={this.submitTask.bind(this)} 
      className="btn waves-effect waves-light" 
      > 
      Submit 
      <i className="material-icons right">send</i> 
      </button> */} 
     </div> 
     </div>

Quelle

2017-09-21 Taylor Austin

Ich glaube, Sie js von Materialise auch Datei benötigen. – brian17han

Dropdown ist unter "Javascript" Abschnitt. [Hier klicken] (http://materializecss.com/dropdown.html) – brian17han

Ich habe die jquery und js Skripte bereits, Seite in den Änderungen hinzugefügt, ich meinte, wählen Sie nicht Dropdown. –

Materialize.css überschreibt die Browser-Standardeinstellungen, um das Tag select zu aktivieren. Um dies zu vermeiden, können Sie die Klasse "browser-default" im select-Tag verwenden.

<select class="browser-default"> 
 
     <option value="" disabled selected>Choose your option</option> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
</select>

Quelle

2018-03-09 10:00:54

Dies scheint ein wenig zu viel für eine ausgewählte zu tun haben Input, aber nach einigen Recherchen habe ich herausgefunden, wie man das löst.

Zuerst müssen Sie in die Komponente gehen, in der Sie den Select-Eingang haben.

In dieser Komponente in der componentDidMount() fügt Sie wie folgt vor:

componentDidMount() { 
    const element = ReactDOM.findDOMNode(this.refs.dropdown); 

    $(element).ready(function() { 
     $('select').material_select(); 
    }); 
    }

Stellen Sie sicher, ReactDOM an der Spitze von react-dom

Danach importieren müssen Sie einen ref Wert in Ihrem select machen like so:

 <select 
      ref="dropdown" 
      id="category" 
      defaultValue="1" 
      onChange={this.updateTask.bind(this)} 
     >

Beachten Sie, dass die Ref von der 01 übereinstimmt. Jetzt, da wir jQuery verwenden, müssen wir sicherstellen, dass es funktioniert und um dies zu tun, müssen Sie zu Ihrer webpack.config.js Datei gehen und das folgende Plugin hinzufügen.

Jetzt sind Sie fertig und sollten bereit sein zu gehen.

Quelle

2017-09-21 15:13:57

Materialize css --Select-- funktioniert nicht in reagieren

Antwort

Verwandte Themen