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

阻止在组件加载后显示警告 `swal` (sweetalert)

Prevent the display of the alert `swal` (sweetalert) after the component has loaded

javascript

reactjs

sweetalert

react-datepicker