Question

我正在尝试使用Link创建一个像react-router这样的表格行功能。

我一直收到错误Cannot read property 'handleClick' of undefined

handleClick(user) {
   this.router.transitionTo('index', user);
}

render(){
   var userNodes = this.props.posts.map(function(user, i){
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   });
...

Answer 1

使用箭头函数作为map回调来保留组件上下文（否则回调内的this将不会指向组件实例）：

render(){
   var userNodes = this.props.posts.map((user, i) => {
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   });

Answer 2

问题binding，您需要bind上下文，否则this将不会指向react组件。将.bind(this)与function一起使用或使用arrow function来避免此类问题。使用此：

render(){
   var userNodes = this.props.posts.map(function(user, i){
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   }.bind(this));

或者这个：

render(){
   var userNodes = this.props.posts.map((user, i) => {
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   });

检查工作示例：

class App extends React.Component{

  handleClick(user){
    console.log(user);
  }

  render(){
   var data = [0,1,2,3,4].map((user, i) => {
       return (
         <tr onClick={() => this.handleClick(user)}>
           <td>{user}</td>
           <td>{user}</td>
           <td>{user}</td>   
         </tr>
       )
   });
   
   return(
      <table>
         <thead>
            <th>A</th>
            <th>B</th>
            <th>C</th>
         </thead>
         <tbody>
            {data}
         </tbody>
      </table>
   )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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='app'/>

Answer 3

你必须绑定它。

var userNodes = this.props.posts.map(function(user, i){}.bind(this));

无法读取属性＆＃39; handleClick＆＃39;使用地图

3 个答案: