Javascript ReactJS webpack babel:_单击通过参数传递其函数的按钮时，此2未定义

毫无疑问，我在这里错过了一些非常明显的东西，但我正在尝试学习lynda教程“Learning React.js”，它有点不同，因为我使用ES6类并通过网页包使用Babel进行传输

问题是执行一个函数，该函数作为参数从Board类传递给Note类。

我有一个“Note”类，可以描述为：

remove() {
    this.props.onRemove(this.props.id);
}
//Notes class
render() {
    return (
        <div className="note">
            <p>{this.props.children}</p>
            <span>
                <button onClick={() => this.remove() }>X</button>
            </span>
        </div>
    );
}

当我单击注释的X按钮时，它会执行注释类中的本地函数，但不会执行作为属性传递的方法（onRemove（）），而是获取（Firefox）：

在Chrome中，我得到：

Cannot read property 'remove' of undefined

我不明白为什么它找不到函数，我上一个教程就是这么做的，它可以找到函数。我可能忽略了一些非常简单的事情

[编辑：额外董事会信息]

//Board's render method
render() {
    return (
        <div className='board'>
            { this.state.notes.map(this.eachNote) }
        </div>
    );
}

//电路板的渲染方法
render（）{
返回(
{this.state.notes.map（this.eachNote）}
);
}

---

在控制台中，它输出我期望的内容。

如果我正确理解“子”组件处理单击， 但是，单击不会传播父组件（板）的信息

在Board中，您正在更改this.state（正确），但传递给“chil”组件，“this”更改

Try（董事会）： This.remove=This.remove.bind（This）

---

在阳光下尝试了一个下午之后，我想展示一下我的解决方案，以防其他人遇到这个问题

我的渲染方法是通过注释数组进行映射，并从每个元素创建注释。问题是我没有将“notes”对象传递给创建note元素的函数。因此，我将渲染方法更改为：

render() {
    return (
        <div className='board'>
            { this.state.notes.map((note) => this.eachNote(note)) }
        </div>
    );
}

render（）{
返回(
{this.state.notes.map（（note）=>this.eachNote（note））}
);
}

---

我不确定，但我认为这是可行的，因为每个Note实例都有它自己的。如果有人有更好的解释，请让我知道。

你能发布更多的

Board

类的代码吗。看来你需要将

这个
绑定到
Board
中定义的
remove（）
方法，或者让它成为一个箭头函数来代表你定义它。您好，我将用更多关于董事会的信息更新主要问题@brandNew我已经使用了箭头函数，它应该自动绑定。
Cannot read property 'remove' of undefined

//Board's render method
render() {
    return (
        <div className='board'>
            { this.state.notes.map(this.eachNote) }
        </div>
    );
}

render() {
    return (
        <div className='board'>
            { this.state.notes.map((note) => this.eachNote(note)) }
        </div>
    );
}