Antd 函数式Modal
2021-10-26
该代码片段展示了一个使用Ant Design的Modal组件实现的React函数式重置确认对话框,用于确认用户是否重置文本和样式。
import React, {Component} from "react"; import {observer, inject} from "mobx-react"; import {Modal, message} from "antd"; import TEMPLATE from "../../../template/index"; import "../common.css"; @inject("content") @inject("navbar") @observer class Reset extends Component { showConfirm = () => { Modal.confirm({ title: "确认重置么?", content: "重置后将丢失本地保存的文本和自定义样式", okText: "确定", okType: "danger", cancelText: "取消", onOk: () => { this.props.content.setContent(TEMPLATE.content); this.props.content.setStyle(TEMPLATE.normal); this.props.content.setCustomStyle(TEMPLATE.custom); this.props.navbar.setTemplateNum(0); message.success("重置成功!"); }, onCancel() {}, }); }; render() { return ( <div id="nice-menu-reset" className="nice-menu-item" onClick={this.showConfirm}> <span> <span className="nice-menu-flag" /> <span className="nice-menu-name">重置</span> </span> </div> ); } } export default Reset;