您好,登錄后才能下訂單哦!
要使用AntDesign的模態框組件,首先確保已經安裝了AntDesign的React組件庫。然后在你的React組件中引入Modal組件:
import { Modal, Button } from 'antd';
接著在你的組件中渲染Modal組件,并設置對應的屬性和事件處理函數:
class MyComponent extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
export default MyComponent;
在上面的示例中,我們創建了一個MyComponent組件,其中包含一個Button和一個Modal組件。點擊Button時,會彈出一個模態框,點擊確定或取消按鈕時,會觸發對應的事件處理函數。你可以根據自己的需求定制Modal組件的內容、樣式和功能。更多詳細的用法可以參考AntDesign官方文檔。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。