Question

如何在React组件中使用Materialize css中的DropDown？当我点击按钮时，没有下拉内容我的代码如下：

import React , {Component} from 'react';
import 'materialize-css';

export default class extends Component{
      openDropDown(){
          $('.dropdown-button').dropdown({
                  inDuration: 300,
                  outDuration: 225,
                  constrainWidth: false, // Does not change width of dropdown to that of the activator
                  hover: true, // Activate on hover
                  gutter: 0, // Spacing from edge
                  belowOrigin: false, // Displays dropdown below the button
                  alignment: 'left', // Displays dropdown with edge aligned to the left of button
                  stopPropagation: false // Stops event propagation
              }
          );
      }
      render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1' onClick={()=> this.openDropDown} >Drop Me!</a>
                <ul classID='dropdown1' className='dropdown-content'>
                    <li><a href="#!">one</a></li>
                    <li><a href="#!">two</a></li>
                    <li className="divider"></li>
                    <li><a href="#!">three</a></li>
                    <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                    <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }
}

Answer 1

您不必将JQuery与React和MaterializeCSS一起使用即可初始化组件。

您需要做的是正确导入M并初始化componentDidMount()内部的下拉列表。有两种方法可以做到这一点；

您可以简单地使用AutoInit（）。

M.AutoInit();

或者，当您还传递初始化选项时，您想使用：

let elems = document.querySelectorAll('.dropdown-trigger');
M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});

我的IDE似乎发现Downdown上不存在M，但是，代码在浏览器中运行正常。

以上示例：

import M from 'materialize-css';  

class Foo extends Component {

    componentDidMount() {
        let elems = document.querySelectorAll('.dropdown-trigger');
        M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});
    }

    render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1'>Drop Me!</a>
                <ul id='dropdown1' className='dropdown-content'>
                  <li><a href="#!">one</a></li>
                  <li><a href="#!">two</a></li>
                  <li className="divider"></li>
                  <li><a href="#!">three</a></li>
                  <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                 <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }

}
export default Foo;

签出Materialize Dropdowns可以查看没有JQuery的初始化文档。

Answer 2

有一个物化的导入，（它是反应兼容的物化模块，这使得工作变得非常简单！）我建议使用它，而不是自己制作。

虽然文档尚未完成，但您可以参考它们！开始实现反应：https://react-materialize.github.io/#/

在这里实现DropDown：https://react-materialize.github.io/#/dropdown

好转！

我如何在React中使用Materialize css中的DropDown

2 个答案: