如何在React js中获得多个选择选项？

Question

所以基本上IAM是react的新成员，并且IAM尝试使用axio get方法创建多个选择选项，我有一个问题，我如何在此文件中添加多个选择选项，IAM尝试使用下面的复选框代码来执行此操作，但仍然会收到错误消息在更改函数上调用一个字符串。除此之外，由于该功能复选框未打开

列表项

import React, { Component, Fragment } from "react";
import axios from "axios";

class Home extends Component {
  state = {
    users: []
  };

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      console.log(res);
      this.setState({
        users: res.data
      });
    });
  }

  showCheckboxes = () => {
    let expanded = false;
    const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
      checkboxes.style.display = "block";
      expanded = true;
    } else {
      checkboxes.style.display = "none";
      expanded = false;
    }
  };

  onChangeValue = e => {
    const value = e.target.value;
    debugger;
  };

  render() {
    const { users } = this.state;

    const nameList = users.length ? (
      <select className="custom-select">
        {users.map((user, i) => {
          return (
            <option key={i} value={user.name}>
              {" "}
              {user.name}
            </option>
          );
        })}
      </select>
    ) : (
      "No Data"
    );

    const usernameList = users.length ? (
      <select className="custom-select">
        {users.map((user, i) => {
          return (
            <option key={i} value={user.username}>
              {user.username}
            </option>
          );
        })}
      </select>
    ) : (
      "No Data"
    );

    const emailList = users.length ? (
      <select className="custom-select">
        {users.map((user, i) => {
          return (
            <option key={i} value={user.email}>
              {user.email}
            </option>
          );
        })}
      </select>
    ) : (
      "No Data"
    );

    return (
      <Fragment>
        {nameList}
        <hr />
        {usernameList}
        <hr />
        {emailList}
        <hr />

        <div className="multiselect">
          <div className="selectBox">
            <select>
              <option>Select an option</option>
            </select>
            <div className="overSelect" onClick="showCheckboxes()"></div>
          </div>
          <div id="checkboxes">
            <label htmlFor="one">
              <input type="checkbox" id="one" />
              First checkbox
            </label>
            <label htmlFor="two">
              <input type="checkbox" id="two" />
              Second checkbox
            </label>
            <label htmlFor="three">
              <input type="checkbox" id="three" />
              Third checkbox
            </label>
          </div>
        </div>
      </Fragment>
    );
  }
}

export default Home; 

Answer 1

此行：

<div className="overSelect" onClick="showCheckboxes()"></div>

到

<div className="overSelect" onClick={this.showCheckboxes}></div>

Answer 2

您可以从GitHub使用此开源组件：https://github.com/JedWatson/react-select。

Answer 3

请仔细阅读本文，了解其结构的演示，您需要什么。 how to get multiple select options in reactjs