วิธีตรวจจับการคลิกภายนอกส่วนประกอบการทำงานของ React

ฉันต้องการตรวจจับการคลิกภายนอกส่วนประกอบ การทำงาน ของ React

จากนั้นฉันก็พบบทความต่อไปนี้และนำโค้ดไปใช้ตามนั้น

ตรวจจับการคลิกภายนอกส่วนประกอบ React

แต่รหัสของฉันใช้งานไม่ได้ ฉันเข้าใจสาเหตุแต่ไม่รู้วิธีแก้ไข

import React from 'react';
import Foo from 'foo'; // <- Functional component in the node_modules

export default class extends React.PureComponent {
  private readonly refRoot = React.createRef();
  public componentDidMount() {
    document.addEventListener('click', this.clickOutside);
  }
  public componentWillUnmount() {
    document.removeEventListener('click', this.clickOutside);
  }
  private clickOutside(ev: MouseEvent) {
    if (refRoot.current.contains(ev.target)) {
      console.log('clicked outside.');
    }
  }
  public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }
}

เนื่องจาก ไม่สามารถใช้แอตทริบิวต์ ref ในส่วนประกอบของฟังก์ชันได้< /ก>.