[英]passing data from antdesign table row to modal
I have a table in which each row has a button that would send a DELETE
request to delete that row's data from database:我有一个表,其中每一行都有一个按钮,可以发送
DELETE
请求以从数据库中删除该行的数据:
{
title: '',
render: (record) => {
return (
<Button icon={<DeleteOutlined />} style={{color:'#1890ff', border:'solid 0px'}} onClick={() => showModal(record)}
>
</Button>
)
}
},
Here I'm trying to pass the record
data when clicking on the button to a modal.在这里,我试图在单击按钮到模态时传递
record
数据。 To do that I created a useState
hook that would store my table row's data and then I wanted to pass the data to a modal:为此,我创建了一个
useState
钩子来存储我的表行数据,然后我想将数据传递给一个模态:
const [modalTaskId, setModalTaskId] = useState();
const [visible, setVisible] = useState(false);
const showModal = (record) => {
setModalTaskId(record);
setVisible(true);
};
This is my modal:这是我的模态:
<Modal
visible={visible}
onOk={() =>{handleOk()}}
confirmLoading={confirmLoading}
onCancel={handleCancel}
>
<p>{modalText}</p>
</Modal>
And let's say I want to log the modalTaskId
when clicking ok on modal:假设我想在模态上单击确定时记录
modalTaskId
:
const handleOk = async () => {
console.log('modalTaskId: ', modalTaskId)
}
But it logs empty for me!但它对我来说是空的! So how can I pass data from my table's row to my modal and then use that data when clicking on modal's ok button?
那么如何将数据从我的表格行传递到我的模态,然后在单击模态的 ok 按钮时使用该数据?
At the first, set the Initial value for your modalTaskId
.首先,为您的
modalTaskId
设置初始值。
const [modalTaskId, setModalTaskId] = useState();
Then, remove onOk
, You can control your visibility by useEffect
:然后,删除
onOk
,您可以通过useEffect
控制您的可见性:
useEffect(() => {
if (visible) console.log(modalTaskId);
}, [visible])
Essentially, depending on the scope of your columns
object, you can wrap them as a return value in a function that captures the context of your showModal
handler.本质上,根据
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)} />
Note that this may not be the most performant solution.请注意,这可能不是性能最高的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.