は、材料のUIテーブルには、私が反応するための材料のUIライブラリーからテーブルを使用したい行

Question

から要素を取得することはできませんリアクト私が選択した行に関連付けられているが、私はそれを行う方法を見つけることができない、私はプロパティchildrenまたはonRowSelectionを見たが、ここで私のオブジェクトはyコードを取得できません。 選択した行のオブジェクト全体を取得するにはどうすればよいですか？

import React, { PropTypes, Component } from 'react' 

import Table from 'material-ui/lib/table/table'; 
import TableHeaderColumn from 'material-ui/lib/table/table-header-column'; 
import TableRow from 'material-ui/lib/table/table-row'; 
import TableHeader from 'material-ui/lib/table/table-header'; 
import TableRowColumn from 'material-ui/lib/table/table-row-column'; 
import TableBody from 'material-ui/lib/table/table-body'; 


export default class MagicTableReact extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}], 
      fixedHeader: true, 
      fixedFooter: true, 
      stripedRows: false, 
      showRowHover: true, 
      selectable: true, 
      multiSelectable: false, 
      enableSelectAll: false, 
      deselectOnClickaway: true, 
      height: '300px', 
     }; 
    }; 


    _onRowSelection(e){ 
     console.log(e) 

    } 


    render() { 

     return (

      <div> 
       <div className="col-sm-6"> 
        <h1>MagicTableReact</h1> 
        <Table 
         height={this.state.height} 
         fixedHeader={this.state.fixedHeader} 
         fixedFooter={this.state.fixedFooter} 
         selectable={this.state.selectable} 
         multiSelectable={this.state.multiSelectable} 
         > 
         <TableHeader> 
          <TableRow> 
           <TableHeaderColumn>ID</TableHeaderColumn> 
           <TableHeaderColumn>Name</TableHeaderColumn> 
          </TableRow> 
         </TableHeader> 
         <TableBody 
         > 
          {this.state.data.map((user, i) => 
           <TableRow key={i} 
            onRowSelection={this._onRowSelection.bind(this)}> 
            <TableRowColumn>{user.id}</TableRowColumn> 
            <TableRowColumn>{user.name}</TableRowColumn> 
           </TableRow> 
          )} 
         </TableBody> 
        </Table> 
       </div> 
      </div> 
     ) 
    } 
} 

MagicTableReact.propTypes = { 

}; 

Answer 1

UPDATE：材料-UI 0.15.4では、onRowSelectionハンドラに渡されたパラメータが変更されました。正しい使い方については、@Jonathnの回答を参照してください。

onRowSelectionは、<Table>ではなく、<TableRow>である。また、呼び出されたときにイベントでハンドラを呼び出すのではなく（e）、キーで呼び出します。それを使って行を見つけることができます。そうのような：使用

_onRowSelection(key) { 
    console.log(key, this.state.data[key]) 
}, 

getInitialState() { 
    return { 
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}], 
    fixedHeader: true, 
    fixedFooter: true, 
    stripedRows: false, 
    showRowHover: true, 
    selectable: true, 
    multiSelectable: false, 
    enableSelectAll: false, 
    deselectOnClickaway: true, 
    height: '300px', 
    }; 
}, 

render() { 
    return (
    <div> 
     <div className="col-sm-6"> 
     <h1>MagicTableReact</h1> 
     <Table 
      height={this.state.height} 
      fixedHeader={this.state.fixedHeader} 
      fixedFooter={this.state.fixedFooter} 
      selectable={this.state.selectable} 
      multiSelectable={this.state.multiSelectable} 
      onRowSelection={this._onRowSelection} 
     > 
      <TableHeader> 
      <TableRow> 
       <TableHeaderColumn>ID</TableHeaderColumn> 
       <TableHeaderColumn>Name</TableHeaderColumn> 
      </TableRow> 
      </TableHeader> 
      <TableBody 
      > 
      {this.state.data.map((user, i) => 
       <TableRow key={i} value={user}> 
       <TableRowColumn>{user.id}</TableRowColumn> 
       <TableRowColumn>{user.name}</TableRowColumn> 
       </TableRow> 
      )} 
      </TableBody> 
     </Table> 
     </div> 
    </div> 
); 
} 

Answer 2

[素材-UI 0.15.4]

onRowSelectionのみnone、allまたは選択された行（複数可）の行番号を含む配列を返します。

onCellClickを使用すると、<Table>レベルでも、rowNumber,columnNumberおよびeventが返されます。このイベントにはtargetの下の表のセルが含まれており、そこからdata-タグなどを参照できます。

例：StackOverflowの上

function handleCellClick (rowNumber, columnNumber, evt) { 
    console.log("activityId", evt.target.dataset.myRowIdentifier); 
} 

function createTableRow (content) { 
    let activityId = content.shift(); 
    return (
    <TableRow key={activityId}> 
     {content.map((columnContent, i) => { 
     return (
      <TableRowColumn key={i} data-my-row-identifier={activityId} >{columnContent}</TableRowColumn> 
     ); 
     })} 
    </TableRow> 
); 
} 

return (
    <div> 
    <Table onCellClick={handleCellClick}> 
     <TableHeader displaySelectAll={false} adjustForCheckbox={false}> 
     {createHeaderRow(tableHeader)} 
     </TableHeader> 
     <TableBody displayRowCheckbox={false}> 
     {filteredTable.map(createTableRow)} 
     </TableBody> 
    </Table> 
    </div> 
); 

私の最初の答え...それはあなたが行番号に基づいて、あなたの最初のデータ配列を使用してインデックスを参照することができます:-)

Answer 3

<Table onCellClick={(row, col, event) => console.log(event.target.innerHTML)}> 

Answer 4

を役に立てば幸い選択した行とそれに関連付けられているオブジェクトにアクセスします。これは基本的な例であり、明らかにデータで何をしたいのかによってロジックを追加する必要があるかもしれません。

_onRowSelection(rows) { 
    for (let i = 0; i < rows.length; i++) { 
     console.log(this.state.data[rows[i]]) 
    } 
}, 

getInitialState() { 
    return { 
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}] 
    }; 
}, 

render() { 
    return (
    <div> 
     <div className="col-sm-6"> 
     <h1>MagicTableReact</h1> 
     <Table onRowSelection={(rows) => this._onRowSelection(rows)}> 
      <TableHeader> 
      <TableRow> 
       <TableHeaderColumn>ID</TableHeaderColumn> 
       <TableHeaderColumn>Name</TableHeaderColumn> 
      </TableRow> 
      </TableHeader> 
      <TableBody 
      > 
      {this.state.data.map((user, i) => 
       <TableRow key={i} value={user}> 
       <TableRowColumn>{user.id}</TableRowColumn> 
       <TableRowColumn>{user.name}</TableRowColumn> 
       </TableRow> 
      )} 
      </TableBody> 
     </Table> 
     </div> 
    </div> 
); 
}