將可點擊的表格行中的數據動態顯示爲模式

Question

我試圖創建一個由數據行組成的組件，點擊該組件後，打開與該表格行有關的信息的模式。例如，當用戶點擊「團隊1」時，會出現一個模式，顯示一個新表格，顯示分配給該團隊的每個用戶。

我已經設法實現這個使用手動提供的參數，但我不知道如何使模態動態顯示數據取決於哪個錶行已被點擊。 Here is a link to a jsfiddle that i've made to show my problem.

getInitialState: function() { 
    return { 
     teams:[ 
     { 
      id: '1', 
      teamName: 'team 1', 
      users: ['dave', 'steve', 'jim', 'barry', 'tom', 'harry'] 
     }, 
     ] 
    }; 


    render: function() { 
    var self = this; 
    var projectsTable = this.state.teams.map(function (obj, index) { 
     return (
     <tr className="table-teamProject" key={index} data-toggle="modal" data-target="#projectUsersModal" data-id='3'> 
      <div className="mCellsContainer"> 
      <div className="mCellsNames">{obj.teamName}</div> 
      <div className="mCellsCount">{obj.users.length} Users</div> 
      </div> 
     </tr> 
    ); 
    }); 

    var projectUsersModal = this.state.teams.map(function (obj, index) { 
     return (
     <div className="modal projectUsersModal fade" id="projectUsersModal" tabIndex={-1} role="dialog" aria-labelledby="myModalLabel"> 
      <div className="modal-dialog" role="document"> 
      <div className="modal-content"> 
       </div> 
      </div> 
      </div> 
    ); 
    }); 

    return (
     <div> 
     <div className="projectsColContainer"> 
      <div className="panel panel-default"> 
      <div className="panel-heading">Projects</div> 
      <table className="scroll-table"> 
       {projectsTable} 
       {projectUsersModal} 
      </table> 
      </div> 
     </div> 
     </div> 
    ); 
    } 

Answer 1

的render()方法是創造，我覺得這是一個隱藏的模式爲每一個你在你的團隊陣列，不管用戶請求的模式展現出來的團隊（點擊球隊的鏈接） 或不。更好的方法是按需創建特定模式，即用戶點擊團隊鏈接時。

這可以通過創建一個單擊處理程序來完成，該函數內部，你會通過設置組ID的模態左右，修改狀態，像這樣：

onClickTeam: function(teamId) { 
    this.setState({ 
    openModalTeamId: this.state.openModalTeamId == teamId ? null : teamId 
    }); 
} 

然後在您的render()方法你會想要檢查這個openModalTeamId狀態屬性是否具有一定的價值，如果是這樣，並且由於你正在存儲團隊的ID，你會想使用Array.prototype.find在狀態團隊數組中查找這個特定的團隊，然後使用返回的結果構建你的模態的內容。

render: function() { 
    ... 

    var modalBody; 
    if (this.state.openModalTeamId) { 
    var team = this.state.teams.find(function(el) { 
     return el.id == self.state.openModalTeamId 
    }); 

    modalBody = 
     ... 
     <div className="modal-body"> 
     Lets assume this is your modal containing the 
     following info about the selected team: 
     <br /><br /> 
     {JSON.stringify(team)} 
     <br /><br /> 
     <div onClick={(this.onClickTeam.bind(this, team.id))}> 
      Click me to close 
     </div> 
     </div> 
     ... 
    } 

    ... 
} 

一旦你的，就像你使用projectUsersModal變量在代碼中你可以只是這個新modalBody變量追加到渲染的JSX。如果沒有團隊被點擊，那麼這個變量將是undefined，並且不會顯示模態。

return (
    <div> 
    <div className="projectsColContainer"> 
     <table className="scroll-table"> 
     {projectsTable} 
     {modalBody} 
     </table> 
    </div> 
    </div> 
); 

jsFiddle

Answer 2

您可以使用https://github.com/fckt/react-layer-stack。

它允許你使用閉包中的變量（如果你將它提供給圖層的「使用」屬性，它將自動傳播），並且將切換到模態窗口的事件數據也設置好。你也可以用zIndex「層疊」圖層。

import { Layer, LayerContext } from 'react-layer-stack' 
// ... for each `object` in array of `objects` 
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id 
return (
    <Cell {...props}> 
     // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext 
     <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({ 
      hideMe, // alias for `hide(modalId)` 
      index } // useful to know to set zIndex, for example 
      , e) => // access to the arguments (click event data in this example) 
      <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}> 
      <ConfirmationDialog 
       title={ 'Delete' } 
       message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' } 
       confirmButton={ <Button type="primary">DELETE</Button> } 
       onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation 
       close={ hideMe } /> 
      </Modal> } 
     </Layer> 

     // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree 
     <LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)` 
      <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event) 
      <Icon type="trash" /> 
      </div> } 
     </LayerContext> 
    </Cell>) 
// ...