javascript - 阻止组件加载后显示警报 `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