React函数组件中点击函数绑定this至元素的问题咨询

完全不用改成类组件，React函数组件里完全能实现你要的效果——问题出在你拿类组件的this逻辑套函数组件了：函数组件在React默认的严格模式下，函数内部的this是undefined，不管怎么绑定都没法指向DOM元素，换个思路就行：

核心解决方案：使用事件对象的currentTarget #

在React的点击事件处理函数中，会自动传入事件对象e，其中e.currentTarget就是绑定了点击事件的DOM元素（也就是你点击的按钮），直接用它调用closest即可，这是函数组件里的标准写法：

import React from 'react';

const YourComponent = () => {
  const printThis = (e) => {
    // e.currentTarget 就是当前点击的按钮元素
    const targetParent = e.currentTarget.closest('.your-target-selector');
    console.log(targetParent);
    // 这里写你后续的业务逻辑
  };

  return (
    <div className="your-target-selector">
      <button onClick={printThis}>点击执行</button>
    </div>
  );
};

export default YourComponent;

为什么之前的绑定方法没用？ #

• 箭头函数本身没有独立的this，它会继承外层作用域的this，而函数组件外层的this是undefined，所以用箭头函数包裹后依然取不到DOM元素。
• 直接调用this.printThis在函数组件里会报错，因为函数组件里的this不是类组件实例，自然没有printThis这个方法。

非要用类组件式的this指向？（不推荐） #

如果你习惯了类组件里this指向元素的写法，也可以通过call手动绑定，但这种写法多此一举，不如直接用e.currentTarget直观：

import React from 'react';

const YourComponent = () => {
  // 用普通函数定义，不要用箭头函数
  function printThis() {
    const targetParent = this.closest('.your-target-selector');
    console.log(targetParent);
  }

  return (
    <div className="your-target-selector">
      <button onClick={(e) => printThis.call(e.currentTarget)}>点击执行</button>
    </div>
  );
};

export default YourComponent;

总的来说，函数组件里推荐直接用事件对象的currentTarget获取绑定事件的元素，这是符合React函数组件设计思路的最优解，没必要特意改成类组件。

内容的提问来源于stack exchange，提问作者MizzyV