字节笔记本字节笔记本

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;