javascript - React 组件中未捕获的类型错误

Question

我创建了这个包含 React 组件的小而简单的脚本:

var React = require('react');


var UsersList = React.createClass({

  handleRedirection: function(userName){
    window.location = '/user/'+userName;
  },
  render: function(){
return(
  <table>
    <tbody>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Day of Birth</th>
      <th>Username</th>
      <th>Role</th>
      <th></th>
    </tr>
    {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(user.userName)}>Open</button></td>
        </tr>
      );
    })}
    </tbody>
  </table>
 )
}
})


module.exports = UsersList;

编译时，我在浏览器中收到以下错误:

Uncaught TypeError: this.handleRedirection is not a function

我相信函数调用方式看起来一切都是正确的，问题可能出在哪里？

Answer 1

您需要将this绑定(bind)到函数:

{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))}