ReactJS +マテリアルUIの奇妙な行動

Question

私は、ユーザーが削除できるようになる1「メニュー項目」で「アイコンメニュー」を追加したいのWebPACK + ReactJSプロジェクト

内部の材質UIを持つテーブルを作成していますラインとリンクされたデータ。私は私のメニューリンクをクリックした場合

export default class GufreFile extends React.Component { 
    render(){ 
     function alertTest() { 
      console.log('hello there'); 
     } 

     return (
      <TableRow> 
       //... 
       <TableRowColumn> 
        <IconMenu 
         iconButtonElement={<IconButton><MoreVertIcon /></IconButton>} 
         anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
         targetOrigin={{horizontal: 'right', vertical: 'top'}} 
        > 
         <MenuItem primaryText="Delete" onTouchTap={ alertTest }/> 

        </IconMenu> 

私はこのコードをしようとすると、すべてが完璧に動作し、私は「こんにちは」を得る：ここで（revelant）コードです。

しかし、私は次の操作を実行した場合：

export default class GufreFile extends React.Component { 
    render(){ 
     function alertTest(data) { 
      console.log(data); 
     } 

     return (
      <TableRow> 
       //... 
       <TableRowColumn> 
        <IconMenu 
         iconButtonElement={<IconButton><MoreVertIcon /></IconButton>} 
         anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
         targetOrigin={{horizontal: 'right', vertical: 'top'}} 
        > 
         <MenuItem primaryText="Delete" onTouchTap={ alertTest(this.props.data.id) }/> 

それは私がページをリロードしたときに、私のコンソールの内側に私の件のデータのidを表示いたします。

これはバグか、私が何か誤解したかどうかわかりません。

誰かが助けることができますか？

はthis要素を参照するようあなたは、クラスのコンストラクタでハンドラをバインドする必要があり、事前に

Answer 1

、ありがとうございました。
また、alertTestをrenderの外に置く必要があります。

export default class GufreFile extends React.Component { 
    constructor(props){ 
     super(props); 
     this.alertTest = this.alertTest.bind(this); 
    } 
    alertTest = (e) -> { 
     console.log(e.target); // you can access the element values here 
    } 
    // render... 
    <MenuItem primaryText="Delete" onTouchTap={alertTest}/> 
    // rest of code 

私は小道具を取得し、イベントを経由して要素にアクセスする方法の一例としてのスニペットを作りました：

class App extends React.Component { 
 
\t \t \t constructor(props){ 
 
     \t super(props); 
 
     this.colorMe = this.colorMe.bind(this); 
 
     } 
 
     colorMe(e){  
 
     e.target.style.backgroundColor = '#abcdef'; 
 
     e.target.innerHTML = this.props.someProp; 
 
     } 
 

 
     render() { 
 
     return (
 
      <div className="App"> 
 
      <div id="clickable" onClick={this.colorMe} /> 
 
      </div> 
 
     ); 
 
     } 
 
    } 
 
    
 
    ReactDOM.render(<App someProp="this is some external prop!"/>, document.getElementById("root"));

#clickable{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #ccc; 
 
    text-align: center; 
 
    padding: 50px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>