在React中的组件外部单击时更改状态

import React, { useState } from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false
    };
  }
  
  // ...
}

import React, { useState } from 'react';

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);
  
  // ...
}

class MyComponent extends React.Component {
  // ...

  handleClickOutside = () => {
    this.setState({ clicked: true });
  }

  // ...
}

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);
  
  const handleClickOutside = () => {
    setClicked(true);
  }

  // ...
}

class MyComponent extends React.Component {
  // ...
  
  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
  }
  
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside);
  }

  // ...
}

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);
  
  const handleClickOutside = () => {
    setClicked(true);
  }
  
  useEffect(() => {
    document.addEventListener('click', handleClickOutside);
    
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  // ...
}