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

IT技术 javascript reactjs dropdown materialize
2021-05-22 20:52:22

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

如何解决这个问题,以便选择下拉列表工作?

4个回答

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

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

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

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

首先,导入 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 就可以了。

首先尝试从 Materializecss 中导入 M:

import M from 'materialize-css';

如上文提到的添加M.AutoInit()componentDidMount()完美。

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

但是写这个答案的目的是因为在我的情况下我正在改变状态以便我可以显示/隐藏一些元素,并且我的<select>标签render()在第一次执行时被隐藏因此,如果您还添加:

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

添加M.AutoInit()componentDidUpdate()是必须的,当你显示/隐藏元素。