如何让 Materialize 选择下拉菜单与 React 一起使用？

Question

添加以下模板代码 provided by 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

首先，确保你导入了 materialize-css

import M from 'materialize-css';  

然后，在页面函数内部（导出默认函数.....()），执行以下操作：

useEffect (()=>{
        M.AutoInit();
    }, [])

Answer 2

首先通过 npm 或 yarn 安装 materialize-css。然后按照下面的代码。

import React, { useEffect } from "react";
import M from "materialize-css";
const Orders = (props) => {
  useEffect(() => {
    // imitialize dropdown
    var elems = document.getElementById("sel");
    var instances = window.M.FormSelect.init(elems, {});
  }, []);

  return (
    <div class="input-field col s12">
      <select  id="sel">
        <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>
  );
};

export default Orders;

Answer 3

首先尝试从 Materializecss 导入 M：

import M from 'materialize-css';

如上所述，在componentDidMount() 中添加M.AutoInit() 效果很好。

componentDidMount() {
    M.AutoInit();
    ...
} 

但写这个答案的目的是因为在我的情况下，我正在更改状态以便我可以显示/隐藏一些元素，并且当render() 第一次执行时我的<select> 标记被隐藏。所以如果你也添加它会是安全的：

componentDidUpdate() {
  M.AutoInit();
  ...
}

在显示/隐藏元素时必须在componentDidUpdate() 中添加M.AutoInit()。

Answer 4

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

首先，导入 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 / 服务器，一切顺利。

Answer 5

在 componentDidMount() 中添加 M.AutoInit() 有效！

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

Answer 6

如果您不想使用“react-dom”库，我假设您正在使用“materialize-css”库，正如materializecss 网页中所说的那样。为此，您必须在组件中执行此操作：

import React, { Component } from 'react';
import 'materialize-css/dist/css/materialize.min.css'
import M from 'materialize-css/dist/js/materialize.min.js'

export default class Navbar extends Component{
    componentDidMount(){
        console.log(M);
        M.AutoInit();
    }
    render(){
        return (
              <div>
               <div className="input-field col s12">
                <select defaultValue="">
                  <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>
              </div>
            )
    }
}

Answer 7

解决方案是使用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 8

另一种方法是从 'react-materialize' 导入 { Input }。代码可能如下所示：

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

使用 selectorOptions 作为一个简单的 JS 对象数组，例如：

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