在 React Js 中更改图像 onClick答案

【问题标题】：Change image onClick in React Js在 React Js 中更改图像 onClick
【发布时间】：2020-10-06 20:11:18
【问题描述】：

我正在尝试在我的 React Js 项目中创建一个页面，左侧是内容，右侧是内容的图像。到目前为止，我已经能够创建一个切换功能，根据所选标题更改文本和图像，因此，例如，如果用户单击标题 1，则会显示 text1 & image1，当用户单击 title2 时，会显示 text2 & image2 将被渲染等等。问题是图像在单击标题之前不会加载，但是我需要在第一次加载页面时显示 img1（然后 img1 应该更改为 img2 或 img3，具体取决于单击标题）。

codesandbox

我的代码：

import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    id: "1",
    key: "1",
    title: "Title1",
    text: "Text1.",
    img: "1.jpg"
  },
  {
    id: "2",
    key: "2",
    title: "Title2",
    text: "Text2.",
    img: "2.jpg"
  },
  {
    id: "3",
    key: "3",
    title: "Title3",
    text: "Text3.",
    img: "3.jpg"
  },
  {
    id: "4",
    key: "4",
    title: "Title4",
    text: "Text4",
    img: "4.jpg"
  }
];

export default function App() {
  const [toggled, toggle] = useState("");
  return (
    <div className="App">
      {data.map(({ title, text, key, img }) => {
        return (
          <>
            <div className="main">
              <div className="text">
                <h1 onClick={() => toggle(key)}>{title} </h1>
                {toggled === key ? (
                  <>
                    <p>{text}</p>
                  </>
                ) : null}
              </div>

              <div className="img">
                {toggled === key ? (
                  <>
                    <img src={img} key={key} className="photo" />
                  </>
                ) : null}
              </div>
            </div>
          </>
        );
      })}
    </div>
  );
}

这是页面在加载时的显示方式

这就是我希望页面加载的方式（显示 img1）

我想做的是当页面加载时，它应该显示img1，但是当用户点击title2时，img1应该变成img2，任何建议将不胜感激，

谢谢。

【问题讨论】：

标签： javascript reactjs image react-hooks toggle

【解决方案1】：

我为你做了一些重构，试试这个：https://codesandbox.io/s/toggle-kc3q2

我将初始状态设置为“1”并使用toggle 和setToggle 作为状态和状态设置器

【讨论】：

您好，谢谢您的建议，在您的解决方案中 text1 也显示在加载中，我只想显示标题和 img1。但是你让我知道了如何实现它。
@Lema 很高兴看到您找到了解决方案。如果您发现它有帮助，您可以否决答案！我可以投票赞成你的问题:)

【解决方案2】：

我在这里发布我的解决方案，以防其他人偶然发现类似的问题。我在我的项目中添加了以下代码行：

***const [visible, setVisible] = useState(true);***

<h1 onClick={() => {
setToggle(key);
***setVisible(false);***
}}>

<div className="img">
***{visible && key === "1" ? (
<img src={img} 
key={key}  
/>) 
: null}***
</div>

codesandbox

在这种情况下，当页面加载时，它只显示 img1 和只显示标题（没有它们的文本），并且只有当用户单击任何标题时，才会显示文本及其图像。

【讨论】：