将数据从 antdesign 表格行传递到模态答案

【问题标题】：passing data from antdesign table row to modal将数据从 antdesign 表格行传递到模态
【发布时间】：2021-11-17 23:59:05
【问题描述】：

我有一个表，其中每一行都有一个按钮，可以发送DELETE 请求以从数据库中删除该行的数据：

{
    title: '',
    render: (record) => {
        return (
            <Button icon={<DeleteOutlined />} style={{color:'#1890ff', border:'solid 0px'}} onClick={() => showModal(record)}
            >
            </Button>
        ) 
    }
},

在这里，我试图在单击按钮时将record 数据传递给模式。为此，我创建了一个 useState 挂钩来存储我的表格行的数据，然后我想将数据传递给模式：

const [modalTaskId, setModalTaskId] = useState();
const [visible, setVisible] = useState(false);
const showModal = (record) => {
    setModalTaskId(record);
    setVisible(true);

};

这是我的模态：

<Modal
    visible={visible}
    onOk={() =>{handleOk()}}
    confirmLoading={confirmLoading}
    onCancel={handleCancel}
>
    <p>{modalText}</p>
</Modal>

假设我想在模式上单击“确定”时记录modalTaskId：

const handleOk = async () => {
    console.log('modalTaskId: ', modalTaskId)
}

但它对我来说是空的！那么如何将表格行中的数据传递给模态，然后在单击模态的确定按钮时使用该数据？

【问题讨论】：

如果您找到解决方案有任何更新吗？

标签： javascript reactjs next.js antd ant-design-pro

【解决方案1】：

Here's an example

基本上，根据您的columns 对象的范围，您可以将它们作为返回值包装在一个函数中，该函数捕获您的showModal 处理程序的上下文。

const getColumns(showModal) { 
  return [{
    title: "Buttons", 
    dataIndex: 'arbitrary', 
    render: (text, record) => 
      <Button onClick={showModal}>Open Modal</Button>
  }, ...]
}

...

// Usage
<Table dataSource={dataSource} columns={getColumns(showModal)} />

请注意，这可能不是最高效的解决方案。

【讨论】：

【解决方案2】：

首先，为您的modalTaskId 设置初始值。

const [modalTaskId, setModalTaskId] = useState();

然后，删除onOk，你可以通过useEffect控制你的可见性：

useEffect(() => {
    if (visible) console.log(modalTaskId);
}, [visible])

【讨论】：

我的模式有一个“确定”按钮来确认我的操作。我想在用户单击“确定”按钮时记录我的行数据，而不是在模式可见时记录，这基本上意味着我需要使用handleOk 记录数据