我如何使用React中Materialise css中的DropDown

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

有對物質化的進口，（這是反應兼容兌現模塊，這使得工作超級簡單！）我會建議使用它，而不是自己動手。

儘管文檔尚未完成，您可以參考他們！ 開始使用物質化的反應：https://react-materialize.github.io/#/

Materialise的下拉這裏：https://react-materialize.github.io/#/dropdown

好走！