映射按钮的useState

Question

我有几张从API映射出来的卡片。每一张卡片都有一个按钮，当点击时，扩展每个卡片的等级部分。我的问题是，所有的按钮只触发第一张卡。

function showGrades() {
    let showAllGrades = document.getElementById('allGrades')
     
    if (showAllGrades.style.display === '' || showAllGrades.style.display === 'none') {
      showAllGrades.style.display = 'inline-block'
    } else {
      showAllGrades.style.display = 'none'
    } 
  }
 

  return (
    <>
      <Card className={"d-flex flex-row flex-wrap border-0"}>
        <Card.Img className='m-2' src={student.pic} style={{width:'8em', height:'8em', border:'1px solid black', borderRadius:'100px'}} />

        <Card.Body>
          <Card.Title as='h1'><strong>{student.firstName + ` ` + student.lastName}</strong></Card.Title>
              <span style={{float:'right'}}>
                <Button onClick={(e) => showGrades(e.target.id)} type='button' style={{background:'none', border:'none'}}>
                <i className='fa fa-plus' style={{fontSize:'24px', color:'#b2b2b2'}}></i>       
                </Button>
              </span>
          <Card.Text className="ps-4" as='p'>Email: {student.email}</Card.Text>
          <Card.Text className="ps-4" as='p'>Company: {student.company}</Card.Text>
          <Card.Text className="ps-4" as='p'>Skill: {student.skill}</Card.Text>
          <Card.Text className="ps-4" as='p'>Average: {student.grades.reduce((a, b) => a + parseFloat(b), 0) / student.grades.length}</Card.Text>
            <div id='allGrades' style={{paddingLeft:'1.5rem', display:'none'}}>
                      {student.grades.map((grade, index) => {
                        return (
                    <>
                    <div className='d-flex flex-column justify-content-center'>Test {index + 1} {grade}</div>
                    
                    </>
                  )
                })}
          </div>
          <span style={{paddingLeft:'1.5rem'}}>
            <Button type='button' className='bg-light' style={{color:'#000'}}>new tag</Button>
          </span>
        </Card.Body>
      </Card>
      
      
    </>
  )
}

沙箱看看到底发生了什么：https://codesandbox.io/s/optimistic-keldysh-9cqgxy?file=/src/App.js

谢谢

Answer 1

首先，要立即解决您的问题，您将需要使用一个独特的身份证为每一张卡。通过创建唯一的标识符后缀，可以避免getElementById('allGrades')的错误。

function showGrades(indexFromParentMapping) {
  let showAllGrades = document.getElementById(
    `allGrades-${indexFromParentMapping}`
  );

 ...
}

一般来说，在react应用程序中使用getElementById是不好的做法，因为您已经可以访问特定的元素而不需要获取id，因为您有一个与按钮单击每个独立卡相关联的事件。考虑使用react您的优势，并将一个值传递到您可以用来聪明地访问存储在父级而不是子级上的更复杂的状态对象的函数中。

您的卡片呈现最终将如下所示，打开和查看的函数和状态将提升到父级：

 ...<div id={`allGrades-${props.index}`} ... />...

在这里阅读更多信息：https://reactjs.org/docs/lifting-state-up.html

Answer 2

打开控制台，您可以找到错误，它本身:)

您使用相同的id设置muliplte div，这是不可能的，因为id是唯一的。因此，除了首先，其他节点不会添加到DOM中。

您可以做的是，在设置id时，创建一个唯一的id，可能是id = "allGraders"+some unique student id，然后单击展开按钮，将该唯一的学生id作为param传递给被调用的函数。在那里寻找那个身份

  const id = "allGrades" + id
    let showAllGrades = document.getElementById("allGrades");