javascript - 我如何在React JS中获得多个选择选项？

所以基本上我是新的反应，我试图创建多个选择选项使用AXIO get方法，我有一个问题，我怎么可以添加多个选择选项在这个文件中，我试图做到这一点与复选框代码以下，但不断获得错误，一个字符串被调用的变化函数。除此之外，由于该功能，复选框没有打开
列表项

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;

最佳答案

这一行：

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

到

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