onClick 展开所有配置文件

Question

该应用正在从 API 加载多个配置文件。单击配置文件的相应按钮时，应显示该配置文件的成绩。问题是单击按钮时会显示所有配置文件等级。

const Profiles = () => {
    
  const [expand, setExpand] = useState(false)

  const ToggleGrades = () => {
    setExpand(prev => !prev)
  }

  return (
    <>
      <div className="profile-container">
        <div className="profile-info">
          <h1 className="profile-name">{profile.firstName} {profile.lastName}</h1> 
          <p className="profile-info">Email: {profile.email}</p>
          <p className="profile-info">Company: {profile.company}</p>
          <p className="profile-info">Skill: {profile.skill}</p>
          <p className="profile-info">Average: {profile.grades}%</p>
          {
            expand && 
              <ul>
                <li key={profile.id[0]} className="profile-grades">Test 1: {profile.grades[0]}</li>
                <li key={profile.id[1]} className="profile-grades">Test 2: {profile.grades[1]}</li>
                <li key={profile.id[2]} className="profile-grades">Test 3: {profile.grades[2]}</li>
                <li key={profile.id[3]} className="profile-grades">Test 4: {profile.grades[3]}</li>
                <li key={profile.id[4]} className="profile-grades">Test 5: {profile.grades[4]}</li>
                <li key={profile.id[5]} className="profile-grades">Test 6: {profile.grades[5]}</li>
                <li key={profile.id[6]} className="profile-grades">Test 7: {profile.grades[6]}</li>
                <li key={profile.id[7]} className="profile-grades">Test 8: {profile.grades[7]}</li>
              </ul>
          }
        </div>
        <div className="profile-grades-expander">
          <button className="profile-expand-button" onClick={ToggleGrades}>{expand ? "-" : "+"}</button>
        </div>
      </div>
    </>
  );
}

export default Profiles;

Answer 1

您发布的代码示例似乎不完整。但是从字里行间看，您似乎在配置文件组件中定义了一个变量“expand”，所有配置文件都使用它。

您应该使用嵌套组件：一个 ProfileList 组件和一个 SingleProfile 组件。展开状态变量应该在 SingleProfile 组件中。

Answer 2

您应该指定要扩展的个人资料，尝试将点击的个人资料的id保存在状态中，并以此来检查您是否应该扩展个人资料。

注意：在代码profile.id中替换为正确的，我不知道对象配置文件的结构。

  const Profiles = () => {
  const [profileToExpand, setProfileToExpand] = useState()

  const ToggleGrades = (id) => {
    setProfileToExpand(id)
  }  

  return (
    <>
    <div className="profile-container">
      
        <div className="profile-info">
                   <h1 className="profile-name">{profile.firstName} {profile.lastName}</h1> 
                          <p className="profile-info">Email: {profile.email}</p>
                          <p className="profile-info">Company: {profile.company}</p>
                          <p className="profile-info">Skill: {profile.skill}</p>
                          <p className="profile-info">Average: {profile.grades}%</p>

                        {(profileToExpand === profile.id) && 
                          <ul>
                            <li key={profile.id[0]} className="profile-grades">Test 1: {profile.grades[0]}</li>
                            <li key={profile.id[1]} className="profile-grades">Test 2: {profile.grades[1]}</li>
                            <li key={profile.id[2]} className="profile-grades">Test 3: {profile.grades[2]}</li>
                            <li key={profile.id[3]} className="profile-grades">Test 4: {profile.grades[3]}</li>
                            <li key={profile.id[4]} className="profile-grades">Test 5: {profile.grades[4]}</li>
                            <li key={profile.id[5]} className="profile-grades">Test 6: {profile.grades[5]}</li>
                            <li key={profile.id[6]} className="profile-grades">Test 7: {profile.grades[6]}</li>
                            <li key={profile.id[7]} className="profile-grades">Test 8: {profile.grades[7]}</li>
                          </ul>
                        }
                      </div>
                      <div className="profile-grades-expander">
                        <button className="profile-expand-button" onClick={() => ToggleGrades(profile.id)}>{expand ? "-" : "+"}</button>
                      </div>
                    </>
                     )
                  })}  
                </div>
              }
        </div>
      </>
    );
  }

export default Profiles;

onClick 展开所有配置文件

onClick expanding all profiles

onclick

reactjs