试图制作一个带有复选框选项的 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

不可能将 checkbox 作为 select 中的选项。您需要创建自己的组件来执行此操作。

或者，你可以试试react-select

Answer 2

我们可以在reactJS中使用bootstrap创建它

下面的代码

HTML:

<div className="dropdown" id="valueItemDrop">
    <button className="selectbox" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Select
    </button>
    <ul className="dropdown-menu" aria-labelledby="dLabel">
        <li className="checkbox form-group">
            <input type="checkbox" id="valuePot" value="Value Pot" name="Value Pot" />
            <label htmlFor="valuePot">Value Pot</label>
        </li>
        <li className="checkbox form-group">
            <input type="checkbox" id="payback" value="Payback" name="Payback" />
            <label htmlFor="payback">Payback</label>
        </li>
        <li className="checkbox form-group">
            <input type="checkbox" id="writeOff" value="Write-off" name="Write-off" />
            <label htmlFor="writeOff">Write-off</label>
        </li>
        <li className="checkbox form-group">
            <input type="checkbox" id="offset" value="Offset" name="Offset" />
            <label htmlFor="offset">Offset</label>
        </li>
        <li className="checkbox form-group">
            <input type="checkbox" id="genValuePot" value="Gen Value Pot" name="Gen Value Pot" />
            <label htmlFor="genValuePot">Gen Value Pot</label>
        </li>
        <li className="checkbox form-group">
            <input type="checkbox" id="mancValuePot" value="Manc Value Pot" name="Manc Value Pot" />
            <label htmlFor="mancValuePot">Manc Value Pot</label>
        </li>
    </ul>
</div>

CSS:

#valueItemDrop .dropdown-menu {
    padding: 0 10px;
    top: 22px;
    width: 100%;
    box-shadow: none;
    border-radius: none;
}
#valueItemDrop .checkbox label:before {
 content: "";
 display: inline-block;
 width: 16px;
 height: 16px;
 margin-right: 10px;
 position: absolute;
 left: 0;
 bottom: 4px;
 background-color: transparent;
 border: 1px solid #ccc;
}

#valueItemDrop .checkbox input[type=checkbox] {
 display: none;
}

#valueItemDrop .checkbox label {
    padding-left: 25px;
    font-weight: bold;
}

#valueItemDrop .checkbox label:before {
    border: 1px solid #ccc;
 border-radius: 3px;
}

#valueItemDrop .checkbox input[type=checkbox]:checked + label:before {
 content: "14";
 font-size: 15px;
 color: #4A90E2;
 text-align: center;
 line-height: 14px;
 padding: 0px;
 font-weight: normal;
}

#valueItemDrop .selectbox {
    border-radius: 5px;
    padding: 3px 5px;
    width: 100%;
    border: 1px solid #A4A4A4;
    float: right;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url('../images/ExpandArrowDown.svg');
    background-repeat: no-repeat;
    background-position: 163px 8px;
    background-color: white;
}

试图制作一个带有复选框选项的 React 下拉菜单，但它无法正常工作

trying to make a React dropdown with checkbox options in it and its not working properly

checkbox

drop-down-menu

reactjs

react-bootstrap