Reactで動作するようにMaterialize selectドロップダウンを取得するにはどうすればよいですか？次のテンプレートコード<a href="http://materializecss.com/forms.html" rel="nofollow">provided by Materialize</a>を追加

Question

は直ちに反応コンポーネントでは動作しません：選択ドロップダウンが機能するように、この問題を解決します

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

どのように？

Answer 1

これを行うには、いくつかの調整が必要です。

まず、react-domをインポートします。

import ReactDOM from 'react-dom'; 

第2に、コンポーネントのレンダリングメソッドの前にcomponentDidMountライフサイクルメソッドを追加します。これは、react-domを使用して、指定した 'dropdown'を指定したrefを使用してselect要素を取得し、上記のSanathが指摘したjQueryメソッドを使用します。

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

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

render() { 
... 

第3に、コンポーネントにコードを追加します。注：（1）最初のオプション要素から 'selected'が削除されました。（2）select要素に 'dropdown'という名前のrefが追加されました。（3）classの代わりにclassNameが使用されました。

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

あなたはWebPACKのを使用している場合最後に、あなたはjQueryのでは、いくつかの特定のメソッドを指すようにwebpack.ProvidePluginを使用する必要があります。

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" 
    }) 
] 

webpack/serverをリロードしてください。

Answer 2

これを行う別の方法は、{Input}を 'react-materialize'からインポートすることです。 selectorOptionsと

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

JSの単純な配列のようなオブジェクトとして：

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

Answer 3

これを解決するには、クラス名としてbrowser default使用することですコードは、このようなものに見えるかもしれません。

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