Javascript 如何使弹出在一个循环中的反应？

我试图在React中使弹出成为一个循环，但我不知道如何只打开一个触发元素

this.props.Videos.map((video) => {
    return (
        <div onClick={this.onClick}>
            <img src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" alt=""/>
            <h3>Text</h3>
            <div style={{display: this.state.videoPopup === true ? "block" : "none"}}>
                <video data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": ""}] }'
               className="video-js vjs-default-skin"
               controls>
               </video>
           </div>
        </div>
    );
})) : null

---

在状态中存储不会自动选择的错误初始视频索引（null，未定义）。创建一个接受视频索引作为参数的单击处理程序，然后将其设置为状态。在render函数中，使用您拥有的

this.state.videoIndex

来测试它是否等于当前正在渲染的视频div，并相应地设置其属性

constructor(props) {
  super(props);
  this.state = {
    videoIndex: null, // falsey value
  }
}

videoClickHandler = index => this.setState(prevState => ({ videoIndex: prevState.videoIndex ? null : index})); // if truthy videoIndex, set null, else, set index

this.props.Videos.map((video, index) => {
  return (
    <div onClick={() => this.videoClickHandler(index)}> // pass index to callback
      ...
      <div style={{display: this.state.videoIndex === index ? "block" : "none"}}> // test if state value equals current index
      ...
    </div>
  );
})) : null

构造函数（道具）{
超级（道具）；
此.state={
videoIndex:null，//假值
}
}
videoClickHandler=index=>this.setState（prevState=>（{videoIndex:prevState.videoIndex？null:index}））；//如果设置为空，则设置为空，否则设置为索引
this.props.Videos.map（（视频，索引）=>{
返回(
this.videoClickHandler（index）}>//将索引传递给回调函数
...
//测试状态值是否等于当前索引
...
);
}))：null

可能将视频对象保存在状态为的数组中，然后在map函数中获取每个视频的索引，并使用它更改相关视频的视频弹出窗口？这对我有帮助，但我有一些问题。我无法关闭此弹出窗口。我的意思是这个映射中的函数不会改变状态。除此之外，当我从一个视频切换到另一个视频时，第一个视频并没有停止。你有什么办法修复它吗？更新，现在检查。

constructor(props) {
  super(props);
  this.state = {
    videoIndex: null, // falsey value
  }
}

videoClickHandler = index => this.setState(prevState => ({ videoIndex: prevState.videoIndex ? null : index})); // if truthy videoIndex, set null, else, set index

this.props.Videos.map((video, index) => {
  return (
    <div onClick={() => this.videoClickHandler(index)}> // pass index to callback
      ...
      <div style={{display: this.state.videoIndex === index ? "block" : "none"}}> // test if state value equals current index
      ...
    </div>
  );
})) : null