在react-bootstrap中正確渲染多個模態

Question

我正在嘗試使用map渲染多個react-bootsrap模態，但我無法這樣做。用我現在的代碼點擊'View Details'按鈕，可以同時激活所有的模態而不是打開相關的模態。下面是我的代碼片段相關的模式：

render() { 
    const { accounts } = this.props; 
    const displayAccounts = Object.keys(accounts).filter(key => { 
     return accounts[key].info.type === 'student' 
    }).map(key => { 
     return (
     <tr key={key}> 
      <th>{accounts[key].info.name}</th> 
      <td>{accounts[key].info.email}</td> 
      <td><Button bsStyle='danger' onClick={() => this.props.removeAccount(key)}>Remove Account</Button></td> 
      <td> 
      <ButtonToolbar> 
       <Button id={key} bsStyle="primary" onClick={this.showModal}>View Details</Button> 
       <Modal 
       id={key} 
       show={this.state.show} 
       onHide={this.hideModal} 
       > 
       <Modal.Header closeButton> 
        <Modal.Title>Student Details</Modal.Title> 
       </Modal.Header> 
       <Modal.Body> 
        <Table responsive striped hover> 
        <thead> 
         <tr> 
         <th>Title</th> 
         <th>Details</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
         <th>Name</th> 
         <td>{accounts[key].userDetails.name}</td> 
         </tr> 
         <tr> 
         <th>Education</th> 
         <td>{accounts[key].userDetails.education}</td> 
         </tr> 
         <tr> 
         <th>GPA</th> 
         <td>{accounts[key].userDetails.gpa}</td> 
         </tr> 
         <tr> 
         <th>Skills</th> 
         <td>{accounts[key].userDetails.skills}</td> 
         </tr> 
         <tr> 
         <th>Overview</th> 
         <td>{accounts[key].userDetails.skills}</td> 
         </tr> 
        </tbody> 
        </Table> 
       </Modal.Body> 
       <Modal.Footer> 
        <Button onClick={this.hideModal}>Close</Button> 
       </Modal.Footer> 
       </Modal> 
      </ButtonToolbar> 
      </td> 
     </tr> 
    ) 
    }) 

Answer 1

嘗試進行以下修改......

添加如下修改this.state在constructor緩存稍後分配有效的模態指數。

this.state = { 
    ..., 
    activeModal: null, 
    ..., 
} 
this.clickHandler = this.clickHandler.bind(this); 
this.hideModal = this.hideModal.bind(this); 

添加/更改以下事件處理程序。 clickHandler接受點擊事件以及將用於設置上述activeModal狀態片段的索引。當反應發現狀態改變時，它會調用render方法和新狀態。這是React的Reactive性質。

clickHandler(e, index) { 
    this.setState({ activeModal: index }) 
} 

hideModal() { 
    this.setState({ activeModal: null }) 
} 

在你的map函數中做這樣的事情。請注意0​​處理程序。使用箭頭函數來捕獲單擊事件，並調用您的clickHandler，這是因爲您也可以傳遞其他參數（在這種情況下爲index）。一旦調用activeModal狀態片段，組件將被重新渲染，在對show進行處理後，prop將評估爲適當的clicked組件。

buttonArray.map((button, index) => { 
    <Button id={key} bsStyle="primary" onClick={e => this.clickHandler(e, index)}>View Details</Button> 
    <Modal 
     id={key} 
     show={this.state.activeModal === index} 
     onHide={this.hideModal} 
    /> 
})