Material UIでTableRowのクリックイベントを使いたい

Question

Google Material UIを使用しています。
以下のソースでtodos変数にDOMを入れてこの後レンダリングしています。

レンダリング後に、TableRowのクリックイベントで処理をしたいのですが、上手くいかずです。

以下のコードで実行するとレンダリング時にアラートが表示されてしまい、
その後クリックしても何も反応しないです。
想定では

• レンダリング時にはイベントが反応しない
• クリックするとalertが実行される

なのですが・・・。
ご教授願います。

let todos = this.todos.map((item) => {
  return (<TableRow key={item.id} onRowClick={ alert() }>
    <TableRowColumn>{item.title}</TableRowColumn>
      <TableRowColumn>{item.description}</TableRowColumn>
    </TableRow>);
});

======================追記======================
added at 2017/1/4

以下のように修正しましたが以前状況変わらずです。
抜粋になりますが、こんな具合です。
状況としては、レンダリング時にアラートが表示されてしまい、クリックしても何も反応しないです。
すみません、ご教授願います・・

export default class Todo extends React.Component {

  constructor(props) {
       super(props)
       ...
  }

  render() {
       let todos = this.todos.map((item) => {
           return (<TableRow key={item.id} onRowClick={ this.handleClick() }>
               <TableRowColumn>{item.title}</TableRowColumn>
               <TableRowColumn>{item.description}</TableRowColumn>
           </TableRow>);
       });

       return (<div>
               <RefreshIndicator
                   percentage={this.percentage}
                   size={this.size}
                   left={0}
                   top={0}
                   color={this.color}
                   status="ready"
                   style={this.styleOfIndicator}
               />
               <span style={this.styleOfTitle}></span>
               <SubTitle>{this.props.title}</SubTitle>
               <Table style={this.styleOfTable}>
                   <TableBody>
                       {todos}
                   </TableBody>
               </Table>
           </div>
       );
   }

   handleClick(e) {
       alert("")
   }
}

Answer 1

ECMAScript 2015 の記法で実装できる状況でしたら以下をお試しください。Arrow Function の例です。

<TableRow key={item.id} onRowClick={() => alert("alert!")}>

あるいは以下のサンプルのようにメソッドを定義するのが実用的な例だと思います。

• http://jsfiddle.net/jhudson8/34yb3ooe/

onClick なども同様ですが、onRowClick={myFunc()} ではなく onRowClick={myFunc} のように渡します。

この点は以下に詳しく書かれています。

• Handling Events - React

Comments

[退会済みユーザー]

ご回答ありがとうございます！
追記にてソースを載せましたのでご教授頂けますと幸いです。

[iktakahiro]

おそらく上述の内容で解決するとは思うのですが、メソッドの実行結果ではなくメソッド自体を渡すようにしてみてください。末尾の () が不要です。

```js
return (<TableRow key={item.id} onRowClick={ this.handleClick() }>
```

以下に修正

```
return (<TableRow key={item.id} onRowClick={ this.handleClick }>
```

Answer 2

ご回答ありがとうございました。
onRowClickが反応せず、MaterialUIの公式サイトを見ましたが、APIに含まれていませんでした。
なので、以下のソースで対応しました。

クリック時にイベント処理（this.handleClick）を行えています。
また、コンストラクターへ以下の記述でメソッドのbindも必要でした・・。

constructor(props) {
  ...
  this.handleClick = this.handleClick.bind(this)
}

// onRowSelectionでの対応
<Table onRowSelection={ this.handleClick }>