我有一个card组件 Package 在一个nextjs链接。该卡由一个身体和页脚。这是我的cardFooter。在cardFooter我有一个Ant Design下拉菜单与两个项目。正如你所看到的，我已经把preventDefault和stopPropagation几乎无处不在，可以导致链接触发，但仍然当我点击共享菜单项，它首先显示模态，当我关闭模态页面导航到链接的地址。
下一篇：js 13.4和ant design 5.12.5

const CardFooter: React.FC<CardFooterProps> = ({ adItem }) => {
  const [showShareDialog, setShowShareDialog] = useState<boolean>(false);
  const { token } = useToken();

  const handleModalChange = () => {
    setShowShareDialog((prev) => !prev);
  };

  return (
    <div className={`flex h-[32px] justify-between`}>
      
      <Space>
        <ActionMenu
          onShare={handleModalChange}
          onReport={() => console.log('reported')}
        />
        <ShareAd
          onChange={handleModalChange}
          openDialog={showShareDialog}
          adItem={adItem}
        />
      </Space>
    </div>
  );
};

字符串
这是我的菜单组件：

const items: MenuProps['items'] = [
  {
    key: 'report',
    label: 'rep',
    danger: true,
    icon: <ExclamationCircleOutlined />,
  },
  {
    key: 'share',
    label: 'shr',
    icon: <ShareAltOutlined />,
    
  },
];

const ActionMenu: FC<ActionMenuProps> = ({ onReport, onShare }) => {
  const handleReportClick: MenuProps['onClick'] = (e) => {
    // doesn't trigger Link component
    onReport();
  };

  const handleShareClick: MenuProps['onClick'] = (e) => {
    e.domEvent.preventDefault();
    e.domEvent.stopPropagation();
    //even with stopPropagation and preventDefault it triggers Link component
    onShare();
  };

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    e.domEvent.preventDefault();
    e.domEvent.stopPropagation();
    switch (e.key) {
      case 'report':
        handleReportClick(e);
        break;
      case 'share':
        handleShareClick(e);
        break;
    }
  };

  const menuProps = {
    items,
    onClick: handleMenuClick,
  };

  return (
    <Dropdown menu={menuProps} trigger={['click']}>
      <Button
        key={'more'}
        type={'text'}
        shape={'circle'}
        icon={<EllipsisOutlined />}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          e.nativeEvent.stopImmediatePropagation();
        }}
      />
    </Dropdown>
  );
};

型
这是我的ShareAd组件的情况下，它可能会有所帮助：

const ShareAd: React.FC<ShareAdProps> = ({ openDialog, onChange, adItem }) => {
  const [linkCopied, setLinkCopied] = useState<boolean>(false);

  const handleCopyLink = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    const itemLink = window.location.href + createLink('Item', adItem);
    navigator.clipboard.writeText(itemLink);
    setLinkCopied(true);
  };

  const modalOkHandler = () => {
    setLinkCopied(false);
    onChange();
  };

  const modalCancelHandler = () => {
    setLinkCopied(false);
    onChange();
  };

  return (
    <Modal
      title='share'
      open={openDialog}
      onCancel={modalCancelHandler}
      centered
      footer={
        <Button onClick={modalOkHandler} type='primary'>
          close
        </Button>
      }
    >
      <p className='mb-2'>share with friends</p>
      <Button onClick={handleCopyLink} type='default' className='w-full'>
        <CopyOutlined />
        {linkCopied ? 'copied' : 'copy'}
      </Button>
    </Modal>
  );
};

型