2

所以基本上我是新的反应并且我试图使用 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;
4

1 回答 1

1

这一行： 

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

至

<div className="overSelect" onClick={this.showCheckboxes}></div>
于 2019-10-15T06:29:09.997 回答