将值绑定到函数时出现以下错误。

TypeError: Cannot read property 'bind' of undefined

请参见下面的代码:

<button className={classes.ButtonStyle} onClick={props.onClickHandler.bind(null,props.id)}>{props.children}</button>


但是箭头功能表示法可以正常工作:

onClick={(e)=>{props.onClickHandler(props.id,e)}}

我可以知道我做错了什么吗?我也不使用基于类的组件,而仅使用基于功能的组件(挂钩)。

onClickHandler函数如下:

const onClickHandler = (id, e) =>{
    e.preventDefault();
    console.log('buttonSetNullHandler', id);
}

最佳答案

如果不整体看一下程序就很难确定,但是这可能正在发生:


使用箭头功能样式,单击按钮时将评估props.onClickHandler
使用bind样式,绑定将在组件首次安装时执行。


我的猜测是,在首次安装组件时,未设置props.onClickHandler,但在单击按钮之前发生的后续渲染中将其设置。

通过在渲染函数中放置console.log(props)并查看它发生了多少次以及每次道具是什么,应该很容易检查。



顺便说一句,我个人将箭头样式设置为绑定样式-紧随您之后的开发人员onClick={e => props.onClickHandler(props.id,e)}likely to be much less surprising。 :)

10-05 20:47
查看更多