Javascript 无法使用React JS从Materialize下拉列表中获取所选值

我有一个具体化下拉列表

      <ul id="dropdown1" className="dropdown-content">
        <li>
          <a href="#!">
            one
          </a>
        </li>
        <li>
          <a href="#!">two</a>
        </li>
        <li className="divider" tabIndex="-1"></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>

显示良好，但我无法获取所选值

我尝试了以下JQuery：-

$(document).ready(function(){
  $('dropdown1').formSelect(); 
});

但我得到一个类型错误：-

TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).formSelect is not a function

任何帮助都将不胜感激

---

谢谢

我认为，如果要从选项列表中选择表单，应该使用

。因此，您可以在

componentDidMount（）

lifecycle方法中初始化

具体化
组件

我在
上附加了
onChange
事件侦听器，以便跟踪值并将其保存在我们的状态中。我还提供了
defaultValue
属性，这样一个人就可以在形式上知道他必须选择什么，例如，选择一个国家


选择组件

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Select extends Component {
  constructor() {
    super();

    this.state = {
      selectVal: null
    };
  }
  componentDidMount() {
    M.FormSelect.init(this.FormSelect);
  }
  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  render() {
    console.log(this.state.selectVal);
    return (
      <div className="input-field col s12">
        <select
          ref={FormSelect => {
            this.FormSelect = FormSelect;
          }}
          name="selectVal"
          onChange={this.handleChange}
          defaultValue="0"
        >
          <option value="0" 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>
    );
  }
}

export default Select;

import React，{Component}来自“React”；
从“物化css”导入M；
导入“MaterializeCSS/dist/css/materialize.min.css”；
类选择扩展组件{
构造函数（）{
超级（）；
此.state={
selectVal:null
};
}
componentDidMount（）{
M.FormSelect.init（this.FormSelect）；
}
handleChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
render（）{
console.log（this.state.selectVal）；
返回(
{
this.FormSelect=FormSelect；
}}
name=“selectVal”
onChange={this.handleChange}
defaultValue=“0”
>
选择你的选择
选择1
选择2
选择3
物化选择
);
}
}
导出默认选择；
您正在使用
Select的
formSelect（）
和
下拉列表的HTML。
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Select extends Component {
  constructor() {
    super();

    this.state = {
      selectVal: null
    };
  }
  componentDidMount() {
    M.FormSelect.init(this.FormSelect);
  }
  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  render() {
    console.log(this.state.selectVal);
    return (
      <div className="input-field col s12">
        <select
          ref={FormSelect => {
            this.FormSelect = FormSelect;
          }}
          name="selectVal"
          onChange={this.handleChange}
          defaultValue="0"
        >
          <option value="0" 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>
    );
  }
}

export default Select;