英文:
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 && (<imgsrc={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 && (<imgsrc={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 && (<imgsrc={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 && (<imgsrc={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>)}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论