Question

当我运行onEditNoteClick函数时，我返回一个错误，上面写着

  Cannot read property 'onEditNoteClick' of undefined

我不知道为什么我会遇到这个问题。为了简化，我将onEditNoteClick参数设置为1，但它仍然不起作用。

  constructor(props) {
      super(props);
      this.onEditNoteClick = this.onEditNoteClick.bind(this);
  }

  ......

  onEditNoteClick(id){
    console.log("came to this function");
  }

  renderNotes(note) {
    return (
      <tr key={note.id}>
          <td> {note.name}</td>
          <td> {note.description} </td>
          <td className="edit" onClick={this.onEditNoteClick.bind(this,1)}><i className="fa fa-fw fa-pencil fa-lg"></i> </td>
      </tr>
    );
  }

.....

render(){
   {this.props.notes.map(this.renderNotes)}

我想我需要在notes map中添加一个bind方法，如下所示：

   {this.props.notes.map(this.renderNotes).bind(this)}

但我不确定正确的语法是什么。

Answer 1

我想我需要在notes map中添加一个bind方法，如下所示：
{this.props.notes.map(this.renderNotes).bind(this)}

这是不正确的。 .bind只能在函数上调用，但.map会返回数组，而不是函数。您需要设置this方法的this.renderNotes值。实现这一目标的最简单方法是将this作为第二个参数传递给.map（参见documentation）：

{this.props.notes.map(this.renderNotes, this)}

或者，在this.renderNotes中绑定constructor，就像使用其他方法一样：

this.renderNotes = this.renderNotes.bind(this);

然后你可以省略第二个参数：

{this.props.notes.map(this.renderNotes)}

另请参阅：How to access the correct `this` context inside a callback?

使用参数返回未定义来执行onClick函数

1 个答案: