Javascript 如何在react js中获得多个选择选项。？

因此，基本上我是react中的新手，我尝试使用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; 

import React，{Component，Fragment}来自“React”；
从“axios”导入axios；
类Home扩展组件{
状态={
用户：[]
};
componentDidMount（）{
axios.get（“https://jsonplaceholder.typicode.com/users）然后（res=>{
控制台日志（res）；
这是我的国家({
用户：res.data
});
});
}
显示复选框=（）=>{
让扩展=假；
常量复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
};
onChangeValue=e=>{
常量值=e.target.value；
调试器；
};
render（）{
const{users}=this.state；
const nameList=users.length(
{users.map（（user，i）=>{
返回(
{" "}
{user.name}
);
})}
) : (
“没有数据”
);
const usernameList=users.length(
{users.map（（user，i）=>{
返回(
{user.username}
);
})}
) : (
“没有数据”
);
const emailList=users.length(
{users.map（（user，i）=>{
返回(
{user.email}
);
})}
) : (
“没有数据”
);
返回(
{nameList}

{usernameList}

{emailList}

选择一个选项
第一个复选框
第二个复选框
第三个复选框
);
}
}
导出默认主页；

此行：

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

到

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