如何获得Materialize select下拉列表以与React一起使用？

Question

添加Materialize提供的以下模板代码无法立即在React组件中运行：

<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

对此的解决方案是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>

Answer 2

在 componentDidMount() 中添加了 M.AutoInit() 工作！

componentDidMount() {
    console.log("component did mount");
    M.AutoInit();
}

Answer 3

您需要进行一些调整才能使其正常工作。

首先，导入 react-dom。

import ReactDOM from 'react-dom';

其次，在组件中的 render 方法之前添加 componentDidMount 生命周期方法。这使用 react-dom 通过您提供的名为“dropdown”的引用来获取选择元素，然后使用上面 Sanath 指出的 jQuery 方法。

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

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

render() {
...

第三，将代码添加到您的组件中。另外，请注意：

1. 'selected' 已从第一个选项元素中删除，
2. 一个名为“dropdown”的引用被添加到 select 元素中，
3. 使用 className 而不是 class（这是 React 的事情）。

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，你需要使用 webpack.ProvidePlugin 来指向 jQuery 的一些特定方法。

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 就可以了。