Question

我想检测React 功能组件之外的点击。

然后，我找到了以下文章，并相应地实现了代码。

Detect click outside React component

但是我的代码不起作用。我了解原因，但是不知道解决方法。

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>
    );
  }
}

因为cannot use the ref attribute on function component。

也许可以通过使用div元素将其包装来解决，但是我想避免在呈现为HTML时使DOM的层次更加复杂。

您有什么想法？

Answer 1

如果要在功能组件内部使用ref，则可以使用React hooks API，而不是从父级传递ref。 https://reactjs.org/docs/hooks-reference.html#useref

请检查上面的^^

Answer 2

在Foo内部呈现的DOM元素上创建ref的想法，您可以通过将其作为可在Foo中使用的道具传递来实现

  <Foo innerRef={this.refRoot}> 
    ...
  </Foo>

Foo内部：

const Foo = (props) => {
   return <div ref={props.innerRef}>{/* data here */}</div>
}

或者您可以使用React.forwardRef将Foos ref转发给它的子项

const Foo = React.forwardRef(props, ref) => {
   return <div ref={ref}>{/* data here */}</div>
}

父母

public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }

如何检测React功能组件之外的点击

2 个答案: