您需要进行一些调整才能使其正常工作。
首先,导入 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() {
...
第三,将代码添加到您的组件中。另外,请注意:
- 'selected' 已从第一个选项元素中删除,
- 一个名为“dropdown”的引用被添加到 select 元素中,
- 使用 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 就可以了。