0
React 컴포넌트에서 Materialize CSS의 DropDown을 어떻게 사용할 수 있습니까? 내가 버튼을 클릭, 내 코드 아래에는 드롭 다운 내용이 없습니다 : 구체화의 가져 오기있다어떻게 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>
)
}
}