在React Js中更改图像onClick
座右铭
我正在尝试在React Js项目中创建一个页面，其内容在左侧，内容的图像在右侧。到目前为止，我已经能够创建一个切换功能，该功能可以根据所选标题更改文本和图像，例如，如果用户单击标题1，则将显示text1和image1，以及当用户单击title2，text2和image2将被渲染，等等。问题是图像要等到单击标题后才能加载，但是第一次加载页面时我需要显示img1（然后img1应更改为img2或img3，具体取决于单击的图像）标题）。
我的代码：
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，任何建议将不胜感激，
谢谢。
座右铭
我将解决方案发布在这里，以防其他人偶然发现类似问题。我在项目中添加了以下代码行：
***const [visible, setVisible] = useState(true);***
<h1 onClick={() => {
setToggle(key);
***setVisible(false);***
}}>
<div className="img">
***{visible && key === "1" ? (
<img src={img}
key={key}
/>)
: null}***
</div>
在这种情况下，加载页面时，它仅显示img1和标题（不带文本），并且仅当用户单击任何标题时，才显示文本和其图像。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
React JS 通过 onClick 更改图表 html 代码
- 2
在React Native中动态更改图像URL
- 3
图像-React JS中的onclick事件
- 4
React setState 在更改图像时不会更新状态
- 5
如何在React JS中更改按钮onClick的背景颜色？
- 6
javascript更改图像onclick
- 7
在React.js中单击不同的图像时更改文本
- 8
如何在React.JS中使用``onclick''功能更改特定div的背景图像
- 9
使用react-native单击时如何更改图像和文本颜色？
- 10
如何在 React 中更改显示 onclick？
- 11
Javascrript onclick更改图像标题
- 12
Javascrript onclick更改图像标题
- 13
Android更改图像onclick imageviev
- 14
jQuery onclick和更改图像
- 15
更改图像jQuery保持onclick
- 16
更改图像onclick无法正常工作
- 17
更改图像 onclick（特定模式）
- 18
使用javascript更改图像onclick
- 19
在libgdx中更改图像
- 20
在imageview中更改图像
- 21
在 Javafx 中更改图像
- 22
如何在JS / HTML中添加更改图像的文本
- 23
在p5.js中单击按钮更改图像
- 24
如何根据Angular JS中的值动态更改图像
- 25
JS - 如何在我的 tinymce 中动态更改图像
- 26
从图像阵列中随机更改图像
- 27
React.js中的OnClick事件绑定
- 28
在React JS中显示隐藏内容onClick
- 29
react.js 中的 onClick 事件错误
我来说两句