onClose propを使用する

MUIのDialogコンポーネントにおいてonBackdropClickを使用したところ、以下の警告が発生しました。

Warning: Failed prop type: The prop `onBackdropClick` of `ForwardRef(Dialog)` is deprecated. Use the onClose prop with the `reason` argument to handle the `backdropClick` events.

警告メッセージは、Dialogコンポーネントの非推奨のprop onBackdropClickに関するものです。これは、このpropがあなたのコードのどこかで使用されているが、もはやサポートされていないか、使用が推奨されていないことを意味します。警告は代わりにonClose propを使用するように提案しています。

これを解決する方法は以下の通りです：

以前は、コードに以下のようなものがあったかもしれません：

<Dialog
  open={isOpen}
  onBackdropClick={handleBackdropClick}
>
  { /* ダイアログの内容 */ }
</Dialog>

警告に従って、これをonClose propを使用するように更新する必要があります：

<Dialog
  open={isOpen}
  onClose={(event, reason) => {
    if (reason === 'backdropClick') {
      handleBackdropClick();
    }
  }}
>
  { /* ダイアログの内容 */ }
</Dialog>

上記のコードでは、onClose propは関数を取り、eventとreasonという2つの引数を受け取ります。reasonは’backdropClick’、’escapeKeyDown’、またはundefinedになる可能性があります。reasonが’backdropClick’かどうかをチェックすることで、ユーザーがダイアログボックスの外側をクリックしたときに関数handleBackdropClick()を実行できます。

以上のようにコードを更新すると、警告は表示されなくなりました。

他の方の参考になりましたら幸いです。