无法将 React 元素绑定到事件侦听器
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
inside mouseDownEvent
in common.js
是 undefined
。为什么?
你的问题是你使用的是箭头函数:
export const mouseDownEvent = event => {
console.log(this); // <-- 'undefined'
};
这会导致 mouseDownEvent
无法获得自己的动态 this
;它使用来自词法外部范围的 this
。您应该改用 function
:
export function mouseDownEvent (event) {
console.log(this);
}
我有这段代码(编辑到相关部分):
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
inside mouseDownEvent
in common.js
是 undefined
。为什么?
你的问题是你使用的是箭头函数:
export const mouseDownEvent = event => {
console.log(this); // <-- 'undefined'
};
这会导致 mouseDownEvent
无法获得自己的动态 this
;它使用来自词法外部范围的 this
。您应该改用 function
:
export function mouseDownEvent (event) {
console.log(this);
}