确认对话框

确认对话框由顶部建造情态动词并显示确认对话框确认和取消按钮。

单击确认按钮或按输入键。单击取消按钮，按电子稳定控制系统键，或单击对话框焦点（即覆盖）的外部。

用法

确认对话框有两种主要的隐含模式：受控和非受控。

非受控模式

只需将组件声明为另一个React的组件渲染方法的一部分，即可独立使用该组件：

• 安装后自动打开（显示）；
• 单击时它将自动关闭取消按钮，按电子稳定控制系统键，或单击对话框焦点（即覆盖）外部；
• onCancel（取消）不是强制性的，但可以通过。即使通过了，对话框仍能自动关闭。

激活此模式只需忽略是打开的道具。在这种情况下，唯一的强制道具是onConfirm（确认）回调。消息作为儿童。您可以传递任何想要的JSX，这允许进一步格式化消息或包含子组件，如果您愿意：

从“@wordpress/components”导入{__terialConfirmDialog作为ConfirmDialog}；函数Example（）{返回(<ConfirmDialog onConfirm={（）=>console.debug（'已确认！'）}>你确定吗<strong>此操作无法撤消</strong></ConfirmDialog>);}

受控模式

让父组件控制对话框的打开/关闭时间。当布尔值被传递到是打开的:

• 它不会自动关闭。您需要通过更新是打开的支柱；
• 两者都有onConfirm（确认）和onCancel（取消）在这种模式下，回调是必需的道具；
• 您将希望更新控制的状态是打开的通过从onCancel（取消）和onConfirm（确认）回调。

从'react'导入{useState}；从“@wordpress/components”导入｛__experialConfirmDialog作为ConfirmDialog｝；函数Example（）{const[isOpen，setIsOpen]=使用状态（true）；常量句柄确认=（）=>{console.debug（'已确认！'）；setIsOpen（false）；};const句柄取消=（）=>{console.debug（'已取消！'）；setIsOpen（false）；};返回(<确认对话框isOpen={isOpen}onConfirm={handleConfirm}onCancel={handleCancel}>你确定吗<strong>此操作无法撤消</strong></ConfirmDialog>);}

不支持：多个实例

多个确认对话框s是一个边缘案例，目前没有得到该组件的正式支持。此时，由于情态动词已实现。

自定义类型

键入DialogInputEvent=|键盘事件<HTMLDivElement>|鼠标事件<HTMLButtonElement>；

道具

标题：字符串

• 必需：否

可选的标题用于对话框。设置标题将在对话框顶部的标题栏中呈现，使其更高一些。酒吧还包括x个右上角的关闭按钮。

儿童：反应。反应节点

• 必需：是

对话框的实际消息。它是作为孩子通过的，任何有效的反应节点被接受：

<确认对话框>你确定吗<strong>此操作无法撤消</strong></ConfirmDialog>

isOpen:布尔值

• 必需：否

定义对话框是打开（显示）还是关闭（未渲染/显示）。它还隐式切换受控模式（如果已设置）或非受控模式（如未设置）。

onConfirm:（event:DialogInputEvent）=>无效

• 必需：是

用户确认时调用的回调。当好 啊按钮被单击或输入已按下。

onCancel:（event:DialogInputEvent）=>无效

• 必需：仅当是打开的未设置

用户取消时调用的回调。当取消按钮，当电子稳定控制系统按键，或当检测到对话框焦点外的单击时（即在覆盖中）。

如果是打开的未设置（非受控模式），因为组件将自行关闭，但如果取消时必须执行某些操作，您仍然可以传递回调（在这种情况下，组件仍将自行关闭）。

如果是打开的设置为（受控模式），然后它是必需的，您需要设置定义是打开的到假如果您希望在用户取消时关闭对话框，则作为此回调的一部分。

确认按钮文本：字符串

• 必需：否
• 默认值：“确定”

显示为确认按钮标签的可选自定义文本

cancelButtonText:string

• 必需：否
• 默认值：“取消”

显示为取消按钮标签的可选自定义文本

最佳实践

ConfirmDialog组件应：

• 仅用于提供取消和确认操作的简短确认消息。
• 使用描述性文本确认按钮。默认值为“OK”。