防止在组件加载后显示警报 `swal` (sweetalert)

Question

当您单击事件和组件加载后都会出现 swal 警报。如何将 swal 警报设置为仅在单击事件后触发，而不是在每次刷新组件后触发。

在这里演示：https://stackblitz.com/edit/react-2dmw2w

function Event({ event }) {

  swal({
    title: event.title,
    text: `${event.description} ${event.id}`,
    /*icon: "info",*/
    buttons: true,
    dangerMode: true,
  })
  .then((willDelete) => {
    if (willDelete) {
      swal("Poof! Your imaginary file has been deleted!", {
        icon: "success",
      });
    } else {
      swal("Your imaginary file is safe!");
    }
  });

///////

  <Calendar
    events={this.state.events}
    startAccessor="start"
    endAccessor="end"
    defaultDate={moment().toDate()}
    localizer={localizer}
    components={{
      event: Event
    }}
  />

Answer 1

我对您的代码进行了一些修改，应用了 ES6（用于最佳实践）并修改了几个变量（我认为大写 E 的事件是保留字）

https://stackblitz.com/edit/react-gd4kqm

但是为了达到您想要的效果，我所做的只是在您单击日历中的事件时才调用 SWAL，我将其分为两个功能，如果您有任何问题，请提出。

JS中的保留字列表：

https://www.w3schools.com/JS/js_reserved.asp