通过处理 Reactjs 中的状态来更改图像源

Question

我正在尝试在Reactjs中制作一个像电子商务产品这样的图像滑块。

在 javascript 中，这很简单，我们只需要更改图像源，但是如何在 React 中做到这一点？因为在 React 中我们必须处理状态。

首先，我将所有四个图像(状态(映射为侧面图像(类名='sideImages'(，然后将状态的第一个图像硬编码为显示图像。现在我希望当我单击任何侧面图像时，它就会变成显示图像(类名称='显示'( 我希望我清楚。

这是我的组件

import React, { Component } from 'react';
class App extends Component {
state = {
images: [
{
id: 1,
img: "https://images.pexels.com/photos/1"
},
{
id: 2,
img: "https://images.pexels.com/photos/2"
},
{
id: 3,
img: "https://images.pexels.com/photos/3"
},
{
id: 4,
img: "https://images.pexels.com/photos/4"
}
]
};
onClickHandler = () => {
this.setState({
// this.state.images[0]['img']: 'this.src'
})    
}
render() {
const sideImages = this.state.images.map(image => (
<img key={image.id} src={image.img} alt="" />
));
return (
<div className="imageSlider">
<div onClick={this.onClickHandler} className="sideImages"> 
{sideImages}</div>
<div className='display'>
<img src={this.state.images[0]['img']} alt="" />
</div>
</div>
)
}
}
export default App;

Answer 1

您可以采取另一种/更好的方法来执行此操作。

在您的状态下保留 2 个变量，即image array[不要改变它] 并selectedImageIndex跟踪当前选择/点击的指甲。

每当您单击任何缩略图图像时，只需更改selectedImageIndex，目标图像 src 就可以指向<img src={this.state.images[this.state.selectedImageIndex]["img"]} alt="" />

这是工作示例：https://codepen.io/raviroshan/pen/QVraKo