Javascript 选择图像表单React Carousel并将其推入新变量

例如，我有一个带有4幅图像的React转盘

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;

从“React”导入React
从“react share”导入{FacebookShareButton}；
从“/images/kitten/200.jpg”导入img1
从“/images/kitten/201.jpg”导入img2
从“/images/kitten/202.jpg”导入img3
从“/images/kitten/203.jpg”导入img4
常量imageList=[img1、img2、img3、img4]
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此参数为“选定”；
}
render（）{
返回(
{imageList.map（（每个）=>(
))}
)
}
}
导出默认应用程序；

我想从滑块中选择一个图像

并将其推入上面定义的新变量

this.选中的

谢谢你的建议，这是你想要的吗

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;

从“React”导入React
从“react share”导入{FacebookShareButton}；
从“/images/kitten/200.jpg”导入img1
从“/images/kitten/201.jpg”导入img2
从“/images/kitten/202.jpg”导入img3
从“/images/kitten/203.jpg”导入img4
常量imageList=[img1、img2、img3、img4]
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={所选：'}；
}
pickFromCarousel（图像）{
this.setState（{selected:image}）；
}
render（）{
返回(
{imageList.map（（每个）=>(
))}
)
}
}
导出默认应用程序；

使用
状态

我要做的是在构造函数中添加一个
selected
到
state
，当然，首先将其设置为null。我们添加了一个名为
pickFromCarousel
的函数，该函数表示将
selected
设置为请求的图像。然后，在我们的
render
函数中，我们使用箭头函数在单击图像时使用
pickFromCarousel
作为函数。代码的其余部分实际上与您的相同。
我建议使用
state
@Score-6谢谢您的建议，这是一个好主意，但是如何将图像从传送带传送到州？如果您能分享一个示例
this.setState（）
我应该把它放在哪里，那将非常有帮助？在渲染和设置状态外的“或创建箭头”函数中？请参见下面的答案。它有一个错误，请检查附件，我可以问为什么函数名是addToCarousel，它应该从旋转木马中选择，因为这正是我想要的吗achive@Dev01因为你的帖子让人困惑。我已经在标题“无需担心”中说过了？你检查过链接了吗？是的。当然了。我正在努力解决这个问题。好的，我很感激