Material UI React Table onCellClickがTableRowで動作しない

Question

反応コンポーネントにMaterial UI Tableがあります。私は自分のテーブルの各行にonCellClickイベントを追加したいと思います。しかし、各TableRowにonCellClickを追加すると、それは起動されません。しかし、それを私のテーブル・タグに追加すると、それは解雇されます。この問題は、Tableタグに追加すると、すべての行に対して1つのタイプのアクションしか取れないことになります。クリックするたびに行ごとに異なることをしたい場合はどうすればいいですか？だからこそ、私はすべてのTableRowタグにonClick型のイベントを持たせたいのです。これどうやってするの？

ここでは、テーブルタグのonCellClickイベントを使用したコードを示しますが、これは嫌です。

class TagDetailTable extends Component { 
     handleButtonClick() { 
      browserHistory.push("TagList") 
     } 

     handleCellClick(){ 
      console.log("cell clicked") 
     } 

     render() { 
      return (
       <MuiThemeProvider> 
       <div> 
        <Table onCellClick= {this.handleCellClick}> 
         <TableHeader> 
          <TableRow> 
           <TableHeaderColumn>ID</TableHeaderColumn> 
           <TableHeaderColumn>Type</TableHeaderColumn> 
           <TableHeaderColumn>Category</TableHeaderColumn> 
          </TableRow> 
         </TableHeader> 
         <TableBody> 
          <TableRow> 
           <TableRowColumn>1</TableRowColumn> 
           <TableRowColumn>Cigarette</TableRowColumn> 
           <TableRowColumn>Compliance</TableRowColumn> 
          </TableRow> 
          <TableRow > 
           <TableRowColumn>2</TableRowColumn> 
           <TableRowColumn>Cigarette</TableRowColumn> 
           <TableRowColumn>Compliance</TableRowColumn> 
          </TableRow> 
          <TableRow > 
           <TableRowColumn>3</TableRowColumn> 
           <TableRowColumn>Cigarette</TableRowColumn> 
           <TableRowColumn>Compliance</TableRowColumn> 
          </TableRow> 
          <TableRow > 
           <TableRowColumn>4</TableRowColumn> 
           <TableRowColumn>Alcohol</TableRowColumn> 
           <TableRowColumn>Compliance</TableRowColumn> 
          </TableRow> 
          <TableRow > 
           <TableRowColumn>5</TableRowColumn> 
           <TableRowColumn>Alcohol</TableRowColumn> 
           <TableRowColumn>Compliance</TableRowColumn> 
          </TableRow> 
          {/*<TableRow>*/} 
           {/*<TableRowColumn>4</TableRowColumn>*/} 
           {/*<TableRowColumn>Alcohol</TableRowColumn>*/} 
           {/*<TableRowColumn>Compliance</TableRowColumn>*/} 
          {/*</TableRow>*/} 
          {/*<TableRow>*/} 
           {/*<TableRowColumn>4</TableRowColumn>*/} 
           {/*<TableRowColumn>Alcohol</TableRowColumn>*/} 
           {/*<TableRowColumn>Compliance</TableRowColumn>*/} 
          {/*</TableRow>*/} 
          {/*<TableRow>*/} 
           {/*<TableRowColumn>4</TableRowColumn>*/} 
           {/*<TableRowColumn>Alcohol</TableRowColumn>*/} 
           {/*<TableRowColumn>Compliance</TableRowColumn>*/} 
          {/*</TableRow>*/} 
         </TableBody> 
        </Table> 
        <div className="backButton"> 
         <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick} 
             labelColor="white"> 

         </RaisedButton> 
        </div> 
       </div> 
       </MuiThemeProvider> 

      ); 
     } 
    } 

Answer 1

OnCellClick to Rowのアタッチはサポートされていません。詳細は、https://github.com/callemall/material-ui/issues/2819を参照してください。

ただし、handleCellClickのfunctionパラメータを使用できます。イベントを受信する関数のシグネチャは次のとおりです。

handleCellClick(row,column,event) 
{ 
    if(row ==0) 
     console.log('Cigarette row clicked'); 

}