从下拉菜单单击事件触发模态 antd答案

【问题标题】：Trigger modal from dropdown menu click event antd从下拉菜单单击事件触发模态 antd
【发布时间】：2020-09-22 15:18:56
【问题描述】：

所以我有一个<Modal/>，它由状态Visible 控制，我希望能够使用SetVisible 从 Antd 的表格行内的下拉菜单中更改此模式的状态，但我找不到一种方法，有什么建议吗？

    <Table // antd table 
        loading={Boolean(!data)} 
        rowKey={'id'} expandable={expandable}  
        pagination={{pageSize: 5}} 
        columns={columns} 
        dataSource={data}
    />

    render: (text, record) => ( // fragment from column object, which contain in column that'll be rendered
    <Space size="middle">
        <Dropdown overlay={() => DropMenu()}> //Where the dropdown compoennt is being called
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                Mais Opções <DownOutlined />
            </a>
        </Dropdown>
    </Space>

  const DropMenu = () => { //Dropdown Component

  return (
    <Menu>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> // Here I'll trigger the modal
          trigger modal
        </a>
      </Menu.Item>
    </Menu>
  )
};

【问题讨论】：

标签： reactjs react-hooks antd

【解决方案1】：

我实际上意识到 antd 有一个 Modal.confirm() ，它是一个函数，它使用你自己的方式处理一个确定和取消按钮来呈现一个确认模式。

<Menu.Item danger>
  <span onClick={() => confirm({id: record.id})}>Delete</span>
</Menu.Item>

function confirm({name, id}) {
   Modal.confirm({
      title: 'Confirm',
      icon: <ExclamationCircleOutlined />,
      content: 'Are you sure you want to delete this user??',
      okText: 'Confirmar',
      cancelText: 'Cancelar',
      onOk: (close) => { ...handling deletion }
   )}
}

【讨论】：