Javascript 在react应用程序中创建“扩展内容”或“显示更多内容”按钮

因此，我尝试在我的react应用程序中添加一个扩展按钮，以显示更多信息，我更希望该应用程序扩展div大小以显示其他内容，因此它基本上是一个扩展按钮，我知道我需要利用usestate属性和函数，但是我很难弄清楚如何更新student div的css以扩展和显示添加的信息。添加的信息为等级部分（仅供参考）

更新：我找到了一种显示更改的方法。我面临的问题是将状态设置为“isExpanded false”，因此当用户单击加号按钮时，它会再次展开以显示类隐藏信息

这是我的App.js文件

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [students, setStudents] = useState(null);
  const [filterData, setFilterData ] = useState(null);
  const [isExpanded, setIsExpanded] = useState(false);

  const studentdata = 'https://www.hatchways.io/api/assessment/students';

  function getStudents(){
    fetch(studentdata)
      .then(resp => resp.json())
      .then(data => {
        setFilterData(data.students);
        setStudents(data.students);
        setIsExpanded(false);
      })
  }



  const searchByName = (event) => {
    event.persist();
    // Get the search term
    const searchItem = event.target.value.toLowerCase().trim();
    // If search term is empty fill with full students data
    if(!searchItem.trim()) {
      setFilterData(students);
    }
    // Search the name and if it found retun the same array
    const serachIn = (firstName, lastName) => {
      if(firstName.indexOf(searchItem) !== -1 || lastName.indexOf(searchItem) !== -1) {
        return true;
      }
      let fullName = firstName.toLowerCase()+" "+lastName.toLowerCase();
      if(fullName.indexOf(searchItem) !== -1) {
        return true;
      }
      return false;
    };
    // Filter the array 
    const filteredData = students.filter((item) => {
      return serachIn(item.firstName, item.lastName);
    });
    // Set the state with filtered data
    setFilterData(filteredData);
  }

  function exp() {
    if(isExpanded){
      setIsExpanded(true);
    }


  }

   return (
    <div className="App">
      <h1>Students</h1>

      <div>
        <button className="fetch-button" onClick={getStudents}>
          Get Students
        </button>
        <br />
      </div>

      <div className="search" id="search">
          <input type="text" name="serachByName" id="searchbar" placeholder="Search by name" onChange={(e) => searchByName(e)} ></input>
      </div>

      {filterData && filterData.map((student, index) => {
       var total = 0;
       for(var i = 0; i < student.grades.length; i++) {
        var grade = parseInt(student.grades[i]);
        total += grade;
       }
       const avg = total / student.grades.length;
       const average = avg.toString();
       const grade1 = student.grades[0];
       const grade2 = student.grades[1];
       const grade3 = student.grades[2];
       const grade4 = student.grades[3];
       const grade5 = student.grades[4];
       const grade6 = student.grades[5];
       const grade7 = student.grades[6];
       const grade8 = student.grades[7];

      return(
      <div className={'student' + isExpanded ? 'expanded' : '' } key={index}>
        <div className="image">
          <img src={student.pic} id="icon"></img>
        </div>

        <div className="text">
          <h3 id="name">{student.firstName} {student.lastName}</h3>
          <p id="detail"><strong>EMAIL:</strong> {student.email}</p>
          <p id="detail"><strong>COMPANY:</strong> {student.company}</p>
          <p id="detail"><strong>SKILL:</strong> {student.skill}</p>
          <p id="detail"><strong>AVERAGE:</strong>: {average}%</p>
          <p id="detail" className="hidden">
            <br></br>Test 1 :{grade1}  
            <br></br>Test 2 :{grade2}
            <br></br>Test 3 :{grade3}  
            <br></br>Test 4 :{grade4}
            <br></br>Test 5 :{grade5}  
            <br></br>Test 6 :{grade6}
            <br></br>Test 7 :{grade7}  
            <br></br>Test 8 :{grade8}
          </p>
        </div>

        <div className="expand">
          <button className="expand_btn" onClick={exp()} id="expand_btn">+</button>
        </div>
      </div>

      )}
      )}
    </div>
  );
}

---

我已经解决了这个代码沙盒中的问题-

检查并让我知道这是否有帮助

有很多方法可以解决你的问题。一种方法是向students数组中的每个对象添加

isExpanded

标志，以便每个student对象都知道该对象是否已展开。我用过这样的旗子

className={"student " + student.isExpanded ? "expanded" : " "}

根据您的实现，iExpanded是全局设置的，因此每个学生项目都将被设置为已展开，并且无法知道哪个项目已展开

注意：我只为getStudents而不是filterStudents实现了

className={"student " + student.isExpanded ? "expanded" : " "}