时间戳

首页 > 解决方案 > react-bootstrap-sweetalert 警报没有出现在屏幕中央

html - react-bootstrap-sweetalert 警报没有出现在屏幕中央

问题描述

我正在尝试在我的屏幕上创建一个甜蜜的警报弹出窗口，当我单击它显示但在屏幕右下角的按钮时。我希望它位于它包含的 div 的中心。我试图让它在引导网格内并居中。但这似乎不起作用。这是屏幕截图。 在此处输入图像描述 这是我的代码。

import React, { Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col, Grid } from 'react-bootstrap';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showAlert:null,
        }
    }
  render() {
    return (
    <div>
        <button onClick={() => this.alertShow()}>Click Me!</button>
        <Grid>
            <Row>
                <Col md="4"></Col>
                <Col md="4">
                {this.state.showAlert}
                </Col>
                <Col md="4"></Col>
            </Row>
        </Grid>
    </div>
    );
  }

  hideAlert = () => {
    this.setState({
        showAlert: null
    });
}
alertShow = () => {
    this.setState({
        showAlert: <SweetAlert
        warning
       showCancel
       confirmBtnText="Yes, delete it!"
       confirmBtnBsStyle="danger"
       cancelBtnBsStyle="success"
       title={"Are you sure to delete ?"}
       onConfirm={() => this.hideAlert()}
       onCancel={() => this.hideAlert()}
       focusCancelBtn
   >
       Message details also will be deleted!
  </SweetAlert>
    });
}
}
export default Test;

标签： htmlcssreactjsreact-bootstrap

解决方案

我找到了解决此问题的方法。我手动设置样式属性<SweetAlert>以使元素居中。

这是我更新的代码<SweetAlert>。

<SweetAlert
        warning
        showCancel
        confirmBtnText="Yes, delete it!"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="success"
        title={"Are you sure to delete ?"}
        onConfirm={() => this.hideAlert()}
        onCancel={() => this.hideAlert()}
        focusCancelBtn
        style={{right:"0",left:"0",top:"0",bottom:"0",marginRight:"auto",marginLeft:"auto",marginTop:"auto",marginBottom:"auto"}}
    >
        Message details also will be deleted!
</SweetAlert>

谢谢！

推荐阅读