Antd Popover закрывается при нажатии внутри popover

Question

Здесь находится песочница Antd popover .

По умолчанию всплывающее окно закрывается всякий раз, когда вы щелкаете в любом месте за пределами всплывающего окна. Я также хочу закрывать popover всякий раз, когда вы нажимаете на любой контент внутри popover

Я видел несколько примеров, когда popover вызывается и отображается в классе, подобном this . Там, где они используют состояние для управления видимостью, а в контенте они могут использовать onClick = {this.hide}, чтобы закрыть окно всякий раз, когда вы щелкаете по этому контенту.

Я бы хотел сохранить popover в функции, а Links - как свою собственную функцию, которая просто возвращает список ссылок.

Например, я пытался использовать реакции useState и onBlur для достижения желаемого результата, например this . В этой песочнице, если вы посмотрите журнал консоли, ссылка в ссылках никогда не будет нажата.

Возможно ли это с помощью popd antd?

edit: Я бы предпочел решение, которое не передает ничего от функции с popover функции, создающей ссылки.

Answer 1

Попробуйте поделиться состоянием visible с компонентом Link:

function Links({ setShow }) {
  return (
    <div
      onClick={e => {
        e.preventDefault();
        setShow(false);
      }}
      onBlur={() => {
        setShow(false);
      }}
    >
      <a href="j">Then click here</a>
    </div>
  );
}