英文:
how to change the image in the array when we click
问题
我有一点小问题
我希望每次点击图像时，我的主图像会根据我点击的图像而更改
我希望点击下面的图像，上面的图像会更改
这是我的代码
import React from "react";
const SingleProductComponent = ({ list }) => {
return (
<div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="SingProduct__img">
<div className="SingProduct__inner">
<div className="inner__data">
{list.image && (
<img
src={list.image[0]}
alt=""
className="inner__data-img"
/>
)}
</div>
</div>
{list.image && (
<div className="SingleProduct__thumb">
<div className="SingleProduct__thumb-list">
{list.image.map((e, index) => (
<div className="thumb__list-item" key={index}>
<img src={e} className="thumb__item-img" alt="" />
</div>
))}
</div>
</div>
)}
</div>
</div>
);
}
希望这对你有所帮助。
英文:
I'm having a little problem
I want every time I click on an image, my main image will change according to the image that I click on
I want to click on the image below, the image above changes
this is my code
import React from "react";
const SingleProductComponent = ({ list }) => {
return (
<div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="SingProduct__img">
<div className="SingProduct__inner">
<div className="inner__data">
{list.image && (
<img
src={list.image[0]}
alt=""
className="inner__data-img"
/>
)}
</div>
</div>
{list.image && (
<div className="SingleProduct__thumb">
<div className="SingleProduct__thumb-list">
{list.image.map((e, index) => (
<div className="thumb__list-item" key={index}>
<img src={e} className="thumb__item-img" alt="" />
</div>
))}
</div>
</div>
)}
</div>
</div>
)
}
答案1
得分: 3
你需要将state设置为所选图像的index，然后根据clicked项更改值。
import React, { useState } from "react";
const SingleProductComponent = ({ list }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const changeSelectedItem = (index) => {
setSelectedIndex(index)
}
return (
<div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="SingProduct__img">
<div className="SingProduct__inner">
<div className="inner__data">
{list.image && (
<img
src={list.image[selectedIndex]}
alt=""
className="inner__data-img"
/>
)}
</div>
</div>
{list.image && (
<div className="SingleProduct__thumb">
<div className="SingleProduct__thumb-list">
{list.image.map((e, index) => (
<div className="thumb__list-item" key={index} onClick={() => changeSelectedItem(index)}>
<img src={e} className="thumb__item-img" alt="" />
</div>
))}
</div>
</div>
)}
</div>
</div>
);
}
英文:
You need to set a state to the selected image index, and then according to the clicked item, you change the value.
import React, {useState} from "react";
const SingleProductComponent = ({ list }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const changeSelectedItem = (index) => {
setSelectedIndex(index)
}
return (
<div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="SingProduct__img">
<div className="SingProduct__inner">
<div className="inner__data">
{list.image && (
<img
src={list.image[selectedIndex]}
alt=""
className="inner__data-img"
/>
)}
</div>
</div>
{list.image && (
<div className="SingleProduct__thumb">
<div className="SingleProduct__thumb-list">
{list.image.map((e, index) => (
<div className="thumb__list-item" key={index} onClick={() => changeSelectedItem(index)}>
<img src={e} className="thumb__item-img" alt="" />
</div>
))}
</div>
</div>
)}
</div>
</div>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论