我试图通过阻止我要打开显示已发送电子邮件的弹出窗口形式的按钮。为此，我创建了一个组件。但是它是通过表单打开的，而不是在单击表单按钮后打开的

import React from 'react';
import { Modal } from 'react-bootstrap';
const DiagPopup = (props) => {
    const {show,onHide} = props;
    return (
        <Modal
            show={show}
            onHide={onHide}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            dialogClassname="confirm-modal"
        >
            {props.loading ? (<div classname={'loader-overlay'}><div classname="loaderForactiveInactive" /></div>) : null}

            <Modal.Header closeButton></Modal.Header>
            <Modal.Body>{props.children}</Modal.Body>
            <Modal.Footer>
                <button type= {props.type} classname="btn btn-save" data-id={props.id} onClick={(event) => props.onHide(event)}>{props.button_name ? props.button_name : "Okay"}</button>
            </Modal.Footer>

        </Modal>
    );

}

export default DiagPopup;

在这里，我打电话给render()

 <form>
 <DiagPopup
                                         type="submit"
                                         show={true}
                                         onHide={(event) => this.generateReportHandler(event)}
                                         button_name="Generate Report"
                                         loading={this.state.popupLoader}>
                                            <p> Thanks for the report request. The report will be sent via email to the user. </p>
                                        </DiagPopup>
</form>

这是我当前获取输出的方式，但是我希望“生成报告”除了“取消”外，在单击该按钮后将出现电子邮件发送的弹出窗口。这就是我想要达到的目标。