如何在反应 js 中获得多个 select 选项？

Question

So basically iam new in react and iam trying to create multiple select option using axio get method i have a problem that how can i add multiple select option in this file iam trying to do this with check box code below but keep getting error that a string is called on change function. Other than that the checkboxes are not opening due to that function

List item

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

this line:

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

to

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

Answer 2

You can use this open-source component from GitHub: https://github.com/JedWatson/react-select .

Answer 3

Look into this article its really well structured demonstration what you need. how to get multiple select options in reactjs