ReactJS - onClick SweetAlert не работает

Question

Я использую ReactJS (и nodejs, mongodb ..), и у меня есть проекты с опцией удаления, и я хочу показать окно подтверждения предупреждения об удалении, и я впервые использую SweetAlert.Он показывает SweetAlert, но не позволяет мне выбрать опцию, немедленно удалить проект.Я покажу картинку, чтобы вы могли видеть, что происходит.

Спасибо!

Мой компонент ProjectPage:

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import moment from 'moment';

import SweetAlert  from 'react-bootstrap-sweetalert'
import Tasks from '../../TaskList/Tasks/Tasks';

import './ProjectPage.css';



class ProjectPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project: {},
            alert: null
        };
    }

    componentDidMount() {

        const { match: { params } } = this.props;

        fetch(`/dashboard/project/${params.id}`)
            .then(response => {
                return response.json()
            }).then(project => {
                this.setState({
                    project: project
                })
            })
    }

deleteProject(e){
    const getAlert = () => (
        <SweetAlert
        warning
        showCancel
        confirmBtnText="Yes!"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="default"
        title="Are you sure you want to delete this project?"
        onConfirm={() => this.deleteFile()}
        onCancel={() => this.onCancelDelete()}
        >
        You will not be able to recover this project!
    </SweetAlert>
    );
    this.setState({
        alert: getAlert()
    });

    e.preventDefault();
}

onCancelDelete(){
    this.setState({
        alert: null
    });
}

    render() {

        const { match: { params } } = this.props;

        const BackgroundImage = {
            backgroundImage: `url(${this.state.project.imageURL})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            height: '350px',
            opacity: '0.7'
        }
        return (

     <div>
         <header style={BackgroundImage}>
 [...]
               <form method='POST' action={`/dashboard/project/${params.id}/delete?_method=DELETE`}>

                   <button id='button__project-delete' style={{ boxShadow: 'none' }} className='button__options--project btn btn-outline-secondary' 
       type='submit' onClick={() => this.deleteProject()}>Delete</button> {this.state.alert}

               </form>

         </header>
  [...]
     </div>

            );
    }
}
export default ProjectPage;

GIF, что происходит:

Answer 1

Выглядит ваша страница обновленной при нажатии кнопки, потому что она находится внутри объекта формы.При нажатии кнопки событие клика не может быть доступно.Так что e.preventDefault() не работает.

Вы должны передать объект события методу deleteProject () .Измените эту строку

<button id='button__project-delete' style={{ boxShadow: 'none' }} className='button__options--project btn btn-outline-secondary' 
   type='submit' onClick={() => this.deleteProject()}>Delete</button> {this.state.alert}

на

<button id='button__project-delete' style={{ boxShadow: 'none' }} className='button__options--project btn btn-outline-secondary' 
   type='submit' onClick={(e) => this.deleteProject(e)}>Delete</button> {this.state.alert}

Answer 2

this.setState({
  alert: getAlert()
});

Пожалуйста, проверьте после изменения этого на

this.setState({
  alert: getAlert
});