反応モーダル含有量を動的に変化させる

Question

反応モーダルに問題があります。私はSingleElementのリストを持っています。クリックした後は、クリックされた要素の詳細があるモーダルウィンドウが表示されます。データを持つJSONは状態として保存され、Modalの内部からは目的の要素を取得する方法を見つけることができません。

ここrender()関数内でモーダルです：

openModal = (beerId) => { 
    this.setState({modalIsOpen: true, chosenBeer: this.state.beers[beerId]}); 
} 

afterOpenModal =() =>{ 
    // references are now sync'd and can be accessed. 
} 

closeModal =() => { 
    this.setState({modalIsOpen: false}); 
} 

Answer 1

次の2つが言うこれを行うことができます：

 <Modal 
      isOpen={this.state.modalIsOpen} 
      onAfterOpen={this.afterOpenModal} 
      onRequestClose={this.closeModal} 
      chosenBeer={this.state.chosenBeer} 
     > 
      <h2> == Dynamically changing title of element == </h2> 
      <button onClick={this.closeModal}>X</button> 
      <img src="{ == Dynamically changing image == }" /> 
     </Modal> 

     <div id="splashElements"> 
     { 
      this.state.elements && 
      this.state.elements.map((item, index) => { 
       return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)}/>) 
      }) 
     } 
     </div> 

そしてここでは、モーダルウィンドウを表示/非表示を担当するメソッドです。メニューアイテムがクリックされると、メニューアイテムを状態に格納する関数を作成すると、モーダルは状態から直接呼び出すことができます。私はどうなるのか

、選択した項目をキャプチャし、カスタム再利用可能なモーダル・コンポーネントにそれを通じ送信listItemのに添付機能を持っている...

onClick={() => this.handleClick(item)} 

handleClick(item) { 
//You would need to create a reusable modal component and import it. 
return (
<ReusableModalComponent item={item} 
) 

} 

次に、あなたのReusableModalComponentにあなたはすべてのものにアクセスすることができますthis.props.item.srcを経由して、リストから...などであるとして、あなたのコードを動作させるためにあなたの例のための

更新...

this.state.elements.map((item, index) => { 
      return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)} onClick={() => this.setState({itemToShow: item, modalIsOpen: !this.state.modalIsOpen}) />) 
     }) 

そして、基準あなたのモーダル