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

Question

我有一个表，其中每一行都有一个按钮，可以发送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)
}

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

Answer 1

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

const [modalTaskId, setModalTaskId] = useState();

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

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

Answer 2

这是一个例子

本质上，根据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)} />

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