从 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.

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

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

Pick image form React Carousel and push it into a new variable

javascript

reactjs

frontend

web-frontend