キャッチされない例外TypeErrorは私が反応成分を含むこの小型でシンプルなスクリプトを作成したコンポーネント

Question

に反応します関数が呼び出される方法に問題はありますか？

Answer 1

あなたは、関数にthisをバインドする必要があります。

{this.props.content.map(function(user, i) { 
    return (
    <tr key={i}> 
     <td>{user.name}</td> 
     <td>{user.surname}</td> 
     <td>{user.birthday}</td> 
     <td>{user.userName}</td> 
     <td>{user.userRole}</td> 
     <td><button onClick={this.handleRedirection.bind(null, user.userName)}>Open</button></td> 
    </tr> 
); 
}.bind(this))} 

Answer 2

あなたが直接handleRedirection()を呼び出して、イベントハンドラの代わりに、関数として戻り値を渡しています。

代わりに、イベントがトリガされた後にのみhandleRedirection()を呼び出すための関数への呼び出しをラップ：

<button onClick={function() {this.handleRedirection(user.userName)}.bind(this)}> 

Answer 3

は、私はあなたのために、このデモを用意しました：http://codepen.io/PiotrBerebecki/pen/ZpBwWzは

あなたは作成onClick={this.handleRedirection.bind(null, user.userName)}に使用することができますレンダリングしないで新しい関数。またuser.userNameが最初の引数として渡されます。

var UsersList = React.createClass({ 

    handleRedirection: function(userName) { 
    console.log(userName); 
    window.location = '/user/' + userName; 
    }, 
    render: function() { 
    return (
     <table> 
     <tbody> 
     <tr> 
      <th>Name</th> 
      <th>Surname</th> 
      <th></th> 
     </tr> 
     {this.props.content.map((user, i) => { 
      return (
      <tr key={i}> 
       <td>{user.name}</td> 
       <td>{user.surname}</td> 
       <td><button onClick={this.handleRedirection.bind(null, user.userName)}>Open</button></td> 
      </tr> 
     ); 
     })} 
     </tbody> 
     </table> 
    ) 
    } 
});