Ant Designのモーダルで枠外クリックを無効にする方法

こんにちは、今回はAnt Designのモーダル（ダイアログ）で外側をクリックしたときに勝手に閉じるのを防ぐ方法を一緒に見ていきましょう。

なぜ枠外クリックを無効にするのか？

みなさん、モーダルを使う時ってどんな時ですか？データの入力や確認が必要な時によく使いますよね。ユーザーが情報を入力中に間違って外をクリックしてしまい、モーダルが閉じてしまうと、入力途中のデータが失われることがあります。これを防ぐために、外側のクリックでモーダルが閉じないように設定するのです。

コードでの設定方法

それでは、どうやって設定するのか見てみましょう。Modal コンポーネントの maskClosable プロパティを使います。このプロパティはデフォルトで true に設定されていて、モーダルの外側（マスク部分）をクリックするとモーダルが閉じるようになっています。

<Modal
  title="Basic Modal"
  visible={isModalVisible}
  onOk={handleOk}
  onCancel={handleCancel}
  maskClosable={false}
>
  <p>Some contents...</p>
</Modal>

ここで maskClosable を false に設定すると、どうなると思いますか？そうです、外側をクリックしてもモーダルは閉じません。ユーザーが意図しない操作で大事な情報を失うことがなくなります。

まとめ

今回はAnt Designのモーダルで外側をクリックしても閉じないようにする方法を解説しました。
今後も可能であれば、ReactとAnt Designの使い方について便利な情報を共有していきます。