クリック可能なテーブル行のデータをモーダルに動的に表示

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を設定することにより、状態を変更しますので、のように：あなたのrender()方法で次に

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

ますこの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変数を使用してコードで行うだけのようなあなたのレンダリングJSXにこの新しいmodalBody変数を追加することができたら。チームをクリックしなかった場合、この変数は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>) 
// ...