不能綁定陣營元素事件偵聽器

Question

我有這樣的代碼（編輯到相關部分）：

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' 
} 

然而common.js中的mouseDownEvent裏面的this是undefined。爲什麼？

Answer 1

你的問題是，您使用的是箭頭功能：

export const mouseDownEvent = event => { 
    console.log(this); // <-- 'undefined' 
}; 

這將導致mouseDownEvent拿不到自身的動態this;它使用來自詞法外部作用域的this。你應該改用function：

export function mouseDownEvent (event) { 
    console.log(this); 
}