无法使用React JS从Materialize下拉列表中获得选定的值

Question

我有这个Materialize DropDown

      <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>

我宣布如下：-

  componentDidMount() {
    let dropdowns = document.querySelectorAll('.dropdown-trigger');

    let options = {
        inDuration: 300,
        outDuration: 300,
        hover: true, // Activate on hover
        coverTrigger: false, // Displays dropdown below the button
    };

    M.Dropdown.init(dropdowns, options);
    var instance = M.Dropdown.getInstance(dropdowns);  
  }

可以正常显示，但是我无法获取所选值。

我尝试了以下JQuery：

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

但我收到类型错误：-

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

任何帮助将不胜感激！

谢谢

Answer 1

我认为应该在表单的情况下使用<Select>从选项列表中进行选择 。 因此，您可以在componentDidMount()生命周期方法中初始化Materialize组件。

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

CodeSandbox-工作演示（在React中选择）

选择组件

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;