[英]Can't bind React element to event listener
我有以下代码(编辑至相关部分):
main.js
import { mouseDownEvent } from '../common';
export default class MyComponent extends React.Component {
componentDidMount() {
this.refs.btn.addEventListener(
'mousedown',
mouseDownEvent.bind(this) // <-- not working!
);
}
render() {
return (
<div ref="btn" className="btn"/>
);
}
}
common.js:
export const mouseDownEvent = event => {
console.log(this); // <-- 'undefined'
}
然而, this
里面mouseDownEvent
在common.js
是undefined
。 为什么?
您的问题是您正在使用箭头功能:
export const mouseDownEvent = event => {
console.log(this); // <-- 'undefined'
};
这将导致mouseDownEvent
拿不到自身的动态this
; 它从词汇外部范围使用this
。 您应该改为使用function
:
export function mouseDownEvent (event) {
console.log(this);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.