無法將React元素綁定到事件監聽器

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

然而， this里面mouseDownEvent在common.js是undefined 。 為什么？

Answer 1

您的問題是您正在使用箭頭功能：

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

這將導致mouseDownEvent拿不到自身的動態this ; 它從詞匯外部范圍使用this 。 您應該改為使用function ：

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