将值绑定到函数时出现以下错误。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。 :)