防止组件加载后显示警报`swal` (甜蜜警报)

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