试图使一个带有复选框选项的React下拉列表正常工作

Question

我正在尝试使用下拉菜单项作为复选框输入进行简单的下拉菜单。目前我有这个：

import React, { Component } from 'react'
export default class Sort extends Component {
  constructor() {
    super()
    this.state= { expanded : false}

  }
  showCheckboxes() {
      var checkboxes = document.getElementById("checkboxes");
      if (!expanded) {
          checkboxes.style.display = "block";
          this.state.expanded = true;
      } else {
          checkboxes.style.display = "none";
          this.state.expanded = false;
      }
  }
  render() {
    return (
      <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select>
                    <option>Select an option</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <label for="one"><input type="checkbox" id="one"/>First checkbox</label>
                <label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
                <label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
            </div>
        </div>
      </form>
    )
  }
}

但是它最终有一个空的下拉菜单，下拉菜单下有多个复选框字段，如果可能的话，我希望将其放在下拉菜单中。

Answer 1

在checkboxa select内不能使用s作为选项。您需要创建自己的组件才能执行此操作。

否则，您可以尝试react-select