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

【问题标题】：Change text when different images are clicked in React.js在 React.js 中单击不同图像时更改文本
【发布时间】：2021-06-02 03:35:05
【问题描述】：

我的目标是拥有 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;

【问题讨论】：

不清楚是什么问题，能否在这个问题的标题和正文中澄清一下？
我想这更多的是如何使这项工作的问题。我不确定我应该问什么，只有我的意图是什么。到目前为止，我将如何实现我的目标？我的大脑告诉我我的图像路径不起作用，所以我应该先看看。到目前为止，我意识到我在数组中有数组，所以我需要放置 {roles[0][0]} 而不仅仅是 {role}。所以我至少需要更新一下
我想你是说你的图片路径不起作用，这是你需要修复的吗？
如果这只是图像的问题，那么问题似乎可以被视为重复stackoverflow.com/questions/64849999/…
我明白了。我解决了我的第一个问题！我确实改变了我的身体，我的问题更明显吗？（stackoverfow 的新手）谢谢！

标签： arrays reactjs image onclick

【解决方案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>

【讨论】：

谢谢，但这实际上将图像显示为列表项，我实际上希望它根本不显示。我的问题可能措辞错误。我希望第一个列表项根本不显示。谢谢！
如果我不想显示角色名称或者只是点击描述怎么办？
没关系，我只是添加了一个或运算符。（索引 === 0 || 索引 === 1 ！）
如果使用object 会更容易：{"img":"...","label":"foo", "description": "bar"} 然后你可以使用<li>{clickedText.description}</li>