當我在 Table antd 中雙擊 onRow 時，我想要打開模式視窗。并將屬性傳遞給模態。像這樣：
<Table
columns={columns}
components={components}
dataSource={dataSource}
onRow={(record) => {
return {
onDoubleClick: () => {
return <ModalWindow props={record} />
// or
return <ModalWindow> {record.name} </ModalWindow>
}
}
}} />
問題是沒有回傳 jsx。我可以保存狀態，就像這里：
const [visible, setVisible] = useState(false);
const [record, setRecord] = useState([]);
<Table
columns={columns}
components={components}
dataSource={dataSource}
onRow={(record) => {
return {
onDoubleClick: () => {
setRecord(record);
setVisible(true);
}
}
}} />
{visible &&
<ModalWindow record={record} />
}
但這不是我的方式。請幫幫我。
uj5u.com熱心網友回復：
您可以通過使用一個Modal并通過雙擊每一行來更新模態內容來處理您的要求，如下所示：
function App() {
// ...
const [isModalVisible, setIsModalVisible] = useState(false);
const [activeRecord, setActiveRecord] = useState(null);
const closeModal = () => {
setIsModalVisible(false);
};
return (
<>
<Table
columns={columns}
dataSource={data}
onRow={(record) => {
return {
onDoubleClick: () => {
setActiveRecord(record);
setIsModalVisible(true);
},
};
}}
/>
<Modal
title="User info"
visible={isModalVisible}
onCancel={closeModal}
footer={null}
>
{/* render whatever you want based on your record */}
<p>{activeRecord?.name} </p>
</Modal>
</>
);
}
我已經在 stackBlitz 上實作了一個示例，您可以查看它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419541.html
標籤：