将数据从antdesign表行传递到modal

Question

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

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

在这里，我试图在单击按钮时将记录数据传递给模态。为此，我创建了一个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>

假设我想在单击modal上的确定时记录modalTaskId：

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

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

Answer 1

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

const [modalTaskId, setModalTaskId] = useState();

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

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

Answer 2

这里有个例子

本质上，根据对象的范围，可以将它们包装为返回值，放在一个函数中，该函数捕获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)} />

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