Wie erhalte ich das Drop-Down-Menü Materialize select, um mit React zu arbeiten?

Question

Hinzufügen den folgenden Template-Code provided by Materialize nicht sofort in einer Reaktion Komponente funktioniert:

<div class="input-field col s12"> 
    <select> 
    <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> 
    <label>Materialize Select</label> 
</div> 

Wie dieses Problem beheben, so dass die Auswahl-Drop-Down-Werke?

Answer 1

Sie müssen einige Anpassungen vornehmen, damit dies funktioniert.

Zuerst importieren Sie read-dom.

Zweitens fügen Sie die componentDidMount-Lebenszyklusmethode vor der Rendermethode in Ihrer Komponente hinzu. Dies verwendet read-dom, um das select-Element über einen Verweis zu erfassen, den Sie "Dropdown" nennen, und verwendet dann die oben von Sanath notierte jQuery-Methode.

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

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

render() { 
... 

Drittens fügen Sie den Code zu Ihrer Komponente hinzu. Hinweis: (1) "ausgewählt" wurde aus dem ersten Optionselement entfernt, (2) wurde dem ausgewählten Element eine Referenz namens "Dropdown" hinzugefügt, (3) Klassenname wird anstelle der Klasse verwendet (es handelt sich um eine React-Sache).

render() { 
    return (
    <div className="input-field col s12"> 
     <select ref="dropdown" defaultValue="1"> 
     <option value="" disabled>Choose your option</option> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
     </select> 
     <label>Materialize Select</label>  
    </div> 
); 
} 

Last, wenn Sie webpack verwenden, müssen Sie die webpack.ProvidePlugin verwenden, um einige spezifische Methoden auf jQuery zu zeigen.

var webpack = require("webpack"); 

module.exports = { 
... 
plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     "Hammer": "hammerjs/hammer", 
     createDayLabel: "jquery", 
     createWeekdayLabel: "jquery", 
     activateOption: "jquery", 
     leftPosition: "jquery" 
    }) 
] 

Laden Sie das Webpack/Server neu und Sie können loslegen.

Answer 2

Eine andere Möglichkeit wäre, {Input} von 'react-materialize' zu importieren. Der Code kann wie folgt aussehen:

<Input s={12} 
name={props.name} 
type='select' 
label={props.label} 
defaultValue={props.content} 
onChange={props.handlerFunction}> 
    {selectorOptions} 
</Input> 

mit selectorOptions als eine einfachen Anordnung von JS Objekten wie zum Beispiel:

let selectorOptions = props.options.map((option, index) => { 
return (
    <option key={index} value={Object.keys(option)[0]}> 
     {Object.values(option)[0]} 
    </option> 
) 
}) 

Answer 3

Die Lösung hierfür ist browser default als die Klassennamen zu verwenden.

<div class="input-field col s12"> 
    <select className="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> 
    <label>Materialize Select</label> 
</div>