从 React Carousel 中选择图像并将其推送到新变量中

Question

例如，我有一个带有 4 张图像的 React Carousel。

import React from 'react'
import { FacebookShareButton } from "react-share";

import img1 from './images/kitten/200.jpg'
import img2 from './images/kitten/201.jpg'
import img3 from './images/kitten/202.jpg'
import img4 from './images/kitten/203.jpg'

const imageList = [img1, img2, img3, img4]

 class App extends Component {
   constructor(props) {
     super(props)
     this.selected = "";
 }

 render() {
   return (
     <div>
      <Carousel>
         {imageList.map((each) => (
         <img src{each} />
         ))}
      </Carousel>
     </div>
    )
  }
}
export default App;

我想从滑块中选择一张图片

并将其推送到上面定义的名为this.selected的新变量中

谢谢

Answer 1

根据您的建议，这是您想要的吗？

import React from 'react'
import { FacebookShareButton } from "react-share";

import img1 from './images/kitten/200.jpg'
import img2 from './images/kitten/201.jpg'
import img3 from './images/kitten/202.jpg'
import img4 from './images/kitten/203.jpg'

const imageList = [img1, img2, img3, img4]
class App extends Component {
 constructor(props) {
     super(props)
     this.state = {selected: ""};
 }
 pickFromCarousel(image) {
     this.setState({selected: image});
 }

 render() {
   return (
     <div>
      <Carousel>
         {imageList.map((each) => (
         <img onClick={() => this.pickFromCarousel(each)} src={each} />
         ))}
      </Carousel>
     </div>
    )
  }
}
export default App;

使用state。

我正在做的是在构造函数中将selected 添加到state，当然，首先将其设置为null。我们添加了一个名为pickFromCarousel 的函数，它表示将selected 设置为请求的图像。然后，在我们的render 函数中，我们使用pickFromCarousel 作为点击图像时的函数，通过使用箭头函数。其余代码与您的几乎相同。