ReactJSループが複数回開いているとき

Question

こんにちは私はReactJSを使いこなしています。この素晴らしいモーダルコンポーネントがモーダルでビデオを開くのがわかりましたが、モーダルを複数のリンクを持つループの中に入れてモーダルを開くと、私は5つのリンクがあれば5回開いています。何が間違っていますか？

モーダルコンポーネント：モーダルコンポーネント内でhttps://github.com/appleple/react-modal-video

import React from 'react' 
import ReactDOM from 'react-dom'enter code here 
import ModalVideo from 'react-modal-video' 

class App extends React.Component { 
constructor() { 
    super() 
    this.state = { 
     isOpen: false 
    } 
    this.openModal = this.openModal.bind(this) 
    } 

    openModal() { 
    this.setState({isOpen: true}) 
    } 

     render() { 
     return (
      <div> 
      <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' /> 
      <button onClick={this.openModal}>Open</button> 
      </div> 
     ) 
     } 
    } 

    ReactDOM.render(
     <App />, 
     document.getElementById('root') 
    ) 

マイループ：

render(){ 
    return(
      <div> 
       {(this.props.frag.all == null) ? null : 
        this.props.frag.all.map((frags, i) => { 
        return (
        <li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
        <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='{frags.url}' /> 
         <button onClick= {this.openModal.bind(this)}>Open</button> 
        </li> 
       )}) 
       } 
      </div> 

Answer 1

問題は、各ModalComponentが同じ状態プロパティisOpenを使用するため、リンクをクリックするとこのプロパティが設定され、各ModalComponentが開きます。各モーダルに固有のプロパティを使用する必要があります（既に使用しているpopertyをkeyとして使用できます）。

<li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
    <ModalVideo channel='youtube' isOpen={this.state.isOpen[frags.id]} videoId='{frags.url}' /> 
    <button onClick= {this.openModal.bind(this, frags.id)}>Open</button> 
</li> 

そして、あなたの方法：

openModal (id) { 
    this.setState({ 
     isOpen: { 
      [id]: true 
     } 
    }); 
} 

Answer 2

理由は、あなたが、modalのopen/close状態を維持するために、単一のstate変数を使用していています1つは正しく動作しますが、複数のモーダルの場合は、複数のst状態を維持するための値を食べ、これを使用：changeに

this.state= { 
    isOpen=[], 
} 

使用この方法を任意の特定のmodalのステータス：

openModal(index){ 
    let isOpen = this.state.isOpen.slice(); 
    isOpen[index] = true; 
    this.setState({isOpen}); 
} 

Bind

状態でarrayとしてisOpen定義各モードのindexは、onClickの方法：

render(){ 
    return(
     <div> 
      {(this.props.frag.all == null) ? null : 
       this.props.frag.all.map((frags, i) => { 
       return (
       <li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
       <ModalVideo channel='youtube' isOpen={this.state.isOpen[i] || false} videoId='{frags.url}' /> 
        <button onClick= {this.openModal.bind(this,i)}>Open</button> 
       </li> 
      )}) 
      } 
     </div> 
    ) 
}