Confirm 二次确认气泡

使用场景

目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。

示例

基本用法

Children 元素必须是单元素，不支持多个元素。

点击盒子试试

inline

() => { const handlers = { onOk() { console.log('clicked ok'); }, onCancel() { console.log('clicked cancel'); }, }; return ( <Group> <Confirm title="确认删除吗？" {...handlers}> <Button shape="warning">删除</Button> </Confirm> <Confirm {...handlers}> <Box display="inline-block" p="m" bg="#333" color="#fff"> 点击盒子试试 </Box> </Confirm> </Group> ); }

() => {
  const handlers = {
    onOk() {
      console.log('clicked ok');
    },
    onCancel() {
      console.log('clicked cancel');
    },
  };

  return (
    <Group>
      <Confirm title="确认删除吗？" {...handlers}>
        <Button shape="warning">删除</Button>
      </Confirm>
      <Confirm {...handlers}>
        <Box display="inline-block" p="m" bg="#333" color="#fff">
          点击盒子试试
        </Box>
      </Confirm>
    </Group>
  );
}

API

字段	描述
onOk	MouseEventHandler<HTMLButtonElement> 点击确认按钮的回调
onCancel	MouseEventHandler<HTMLButtonElement> 点击取消按钮的回调
children*	ReactElement<any, string | JSXElementConstructor<any>> 正文内容
title	ReactNode 提示内容
visible	boolean 是否显示弹层
onRequestClose	(reason: any) => void 弹层请求关闭时触发事件的回调函数
attachOverlayManager	boolean
renderTarget	(htmlProps, partialPopupProps) => React.ReactNode 渲染目标元素的自定义方法。 该属性将覆盖 target/targetTagName/targetStyle
onRequestOpen	(reason: any) => void 弹层请求打开时触发事件的回调函数
placement	Placement 弹层方向
flip	boolean 弹层翻转 是否允许弹层翻转
浮层容器
usePortal	boolean 是否使用 portal 来渲染弹层内容
浮层交互
interactionKind	PopupInteractionKind 触发弹层显示或隐藏的操作类型，可以是 click', 'hover', 'hover-target'
浮层生命周期
beforeOpen	(state?: any) => Promise<IOverlayAnimationProps> 浮层即将被打开时的回调
onOpen	() => void 浮层打开时的回调
afterOpen	() => void 浮层打开时的回调
beforeClose	() => IOverlayAnimationProps 浮层即将被关闭时的回调
onClose	() => void 浮层关闭时的回调
afterClose	() => void 浮层关闭后的回调