在 React.js 中单击不同图像时更改文本

Question

我的目标是有 3 个不同的图像，当它们被点击时，每个图像都会改变显示的文本。我的问题是当每个图像被点击时，它仍然显示第一个列表项中的图像路径，如下面的屏幕截图("../../img/shield.png")。我怎样才能阻止它显示？

import React, { useState } from "react";
import "./UserRoles.css";
import shield from "../../img/shield.png"
import sword from "../../img/sword.png"
import staff from "../../img/staff.png"

const roles = [
  [
     shield,
    "Term1",
    "Description1",
  ],
  [
     sword,
    "Term2",
    "Description2",
  ],
  [
     staff,
    "Term3",
    "Description3",
  ],
];

const UserRoles = () => {
  const [clickedText, setClickedText] = useState([]);

  var handleClick = (index) => {
    setClickedText(roles[index]);
  };

  return (
    <div>
      {/* map through texts array */}
      {roles.map((role, index) => (
        <img src={roles[index][0]} key={index} onClick={() => handleClick(index)} />
      ))}

      <ul>
        {clickedText.map((t, index) => (
          <ul>
            <li key={index}>{t}</li>
          </ul>
        ))}
      </ul>
    </div>
  );
};

export default UserRoles;

Answer 1

目前所选数组中的所有值都打印为纯文本 <li key={index}>{t}</li>，您可以添加一些条件：

<ul>
  {clickedText.map((t, index) => {
    return index === 0 ? <li key={index}><img src={t} /></li> : <li key={index}>{t}</li>
  })}
</ul>

在 React.js 中单击不同图像时更改文本

Change text when different images are clicked in React.js

arrays

image

onclick

reactjs