Question

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

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

首先，我将所有四个图像（状态）映射为侧面图像（className ='sideImages'），然后将状态的第一幅图像硬编码为显示图像。现在我想当我单击任何侧面图像时将其变成显示图像（className ='display'）我希望我很清楚。

这是我的组成部分

    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

通过处理React.js中的状态来更改图像源

1 个答案: