Question

你知道为什么，当我在地图之外调用函数时，它可以工作，但不在里面吗？我试图在map的回调函数参数中传递“this”。我习惯于在地图内部绑定并且没有任何效果。

var React = require('react');
var PropTypes = require('prop-types');

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: props.events
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e){
    console.log("Boom!")
  }
  render() {
    return (
      <div>
        <table onClick={this.handleClick}><tbody>
        {this.props.events.map(function(event){
               return(
                   <tr key={event.position}>
                   <td onClick={this.handleClick}>{event.position}</td>
                   <td>{event.start_time}</td>
                   <td>{event.duration}</td>
                   <td>{event.end_time}</td>
                   <td>{event.text}</td>
                   </tr>
               ) 
            })}
        </tbody></table>
      </div>
    )
  }
}
module.exports = List;

请告知

Answer 1

将其更改为胖箭头函数，使this回退到外部范围。 function按照您使用它的方式创建新this。

{this.props.events.map((event) => {
    ...
})}

ReactJS - 更深入地传递函数

1 个答案: