從回圈中反應更改圖示onClick

我在映射陣列時包含了一個圖示，我需要在單擊時更改該特定迭代上的圖示，我還想在單擊圖示時呈現測驗結果。

我不確定如何獲得特定于此迭代的唯一值來處理此更改，或者我的結構完全錯誤，我應該如何處理？

const Students = ({students}) => {

return (
    {students.map((student, i) => (
        <div className="wrapper" key={student.id}>
          <div className="img-container">
            <img src={student.pic} alt="student" />
          </div>
          <div className="content">
            <h1>
              {student.firstName.toUpperCase()} {student.lastName.toUpperCase()}
            </h1>
            <p>Email: {student.email}</p>
            <p>Company: {student.company}</p>
            <p>Skill: {student.skill}</p>
            <p>Average: {averageGrade(student.grades)}%</p>

            {faMinus && <TestResults results={student.tests} />}
          </div>
          <FontAwesomeIcon
            id={i}
            onClick={e => handleTests(e.target.id)}
            className="faIcon"
            icon={current ? faPlus : faMinus}
          />
        </div>
      ))}
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

提前感謝您的任何建議

uj5u.com熱心網友回復：

回傳必須始終具有頂級標簽。

  const Students = ({ students }) => {
    return (
      <>
        {students.map((student, i) => (
          <div className="wrapper" key={student.id}>
            <div className="img-container">
              <img src={student.pic} alt="student" />
            </div>
            <div className="content">
              <h1>
                {student.firstName.toUpperCase()}{" "}
                {student.lastName.toUpperCase()}
              </h1>
              <p>Email: {student.email}</p>
              <p>Company: {student.company}</p>
              <p>Skill: {student.skill}</p>
              <p>Average: {averageGrade(student.grades)}%</p>

              {faMinus && <TestResults results={student.tests} />}
            </div>
            <FontAwesomeIcon
              id={i}
              onClick={(e) => handleTests(e.target.id)}
              className="faIcon"
              icon={current ? faPlus : faMinus}
            />
          </div>
        ))}
      </>
    );
  };

uj5u.com熱心網友回復：

如果這就是你的想法，請告訴我。只需將索引存盤在狀態變數中并與它進行比較。當他們單擊時，將索引更改為他們單擊的索引。

const Students = ({students}) => {
const [selectedIndex, setSelectedIndex] = useState(0)


function handleTests(id, index) {   //NEW
    //Your current code
    setSelectedIndex(index)   //NEW
}

return (
{students.map((student, i) => (
    <div className="wrapper" key={student.id}>
      <div className="img-container">
        <img src={student.pic} alt="student" />
      </div>
      <div className="content">
        <h1>
          {student.firstName.toUpperCase()} {student.lastName.toUpperCase()}
        </h1>
        <p>Email: {student.email}</p>
        <p>Company: {student.company}</p>
        <p>Skill: {student.skill}</p>
        <p>Average: {averageGrade(student.grades)}%</p>

        {selectedIndex == i && <TestResults results={student.tests} />}   //NEW
      </div>
      <FontAwesomeIcon
        id={i}
        onClick={e => handleTests(e.target.id, i)}   //NEW
        className="faIcon"
        icon={selectedIndex == i ? faPlus : faMinus}
      />
    </div>
  ))}
  )
}

標籤：javascript html 反应 反应钩子

上一篇：javaScript和Regex，用另一個字串替換字串上的最后一次出現

下一篇：將搜索查詢和預設文本連接到搜索