在 React 事件处理程序中使用 .bind() 时出错

Posted 2023-02-21

【中文标题】在 React 事件处理程序中使用 .bind() 时出错

【英文标题】：Error using .bind() in React event handler

【发布时间】：2017-06-23 23:41:25

【问题描述】：

我正在学习 React 教程，但无法理解我为什么会遇到错误。

我正在尝试使用 React 添加此按钮元素：

<button onClick=this.add.bind(null, 'new item')>New Item</button>

事件处理程序应该调用位于不同 React 类中的以下函数：

    add: function(item) 
    var arr = this.state.comments;
    arr.push(item);
    this.setState(comments: arr);
    ,

我被告知这不起作用，因为我“将 null 绑定到你的函数这个值，并且在你正在访问的函数内部，你正在从 this 访问属性，这会导致 typeError（可能：无法访问 null 或 sh 的属性状态。）”

但是，我不知道这意味着什么或如何解决问题。请帮忙。

下面是我完整的 codepen 项目和我正在使用的 YouTube 教程（React JS 初学者教程 - 13 - TheNewBoston 创建新组件）的链接。

http://codepen.io/Daniel_Widrich/pen/yVaXXZ

https://www.youtube.com/watchv=OKRu7i49X54&index=13&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA

提前非常感谢您。这是我在 *** 上的第一个问题，我正在尝试接受基于该项目的学徒计划。非常感谢任何反馈，我是个大男孩，所以我可以处理批评。

-丹

【参考方案1】：

错误消息Uncaught TypeError: Cannot read property 'bind' of undefined 表示您在undefined 对象上调用bind。 IE。 this.add 是 undefined。

为什么this.add 未定义？

因为您没有在Board 组件中定义add 函数。将add 函数从Comment 组件移动到Board 组件。

（将 javascript 代码的第 15-19 行移动到 Board 组件中。）

Working codepen

【讨论】：

谢谢。我很感激。这真的归结为用户错误，我将删除问题