Popconfirm 气泡确认框

点击元素，弹出气泡式的确认框。

何时使用

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

和 confirm 弹出的全屏居中模态对话框相比，交互形式更轻量。

代码演示

基本

最简单的用法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Popconfirm, message } from 'choerodon-ui';
​
function confirm(e) {
  console.log(e);
  message.success('Click on Yes');
}
​
function cancel(e) {
  console.log(e);
  message.error('Click on No');
}
​
ReactDOM.render(
  <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>,
  document.getElementById('container'));
​

国际化

使用 okText 和 cancelText 自定义按钮文字。

import React from 'react';
import ReactDOM from 'react-dom';
import { Popconfirm } from 'choerodon-ui';
​
ReactDOM.render(
  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>,
  document.getElementById('container'));
​

位置

位置有十二个方向。如需箭头指向目标元素中心，可以设置 arrowPointAtCenter。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Popconfirm, message, Button } from 'choerodon-ui';
​
const text = 'Are you sure delete this task?';
​
function confirm() {
  message.info('Click on Yes.');
}
​
ReactDOM.render(
  <div className="demo">
    <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
      <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>TL</Button>
      </Popconfirm>
      <Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>Top</Button>
      </Popconfirm>
      <Popconfirm placement="topRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>TR</Button>
      </Popconfirm>
    </div>
    <div style={{ width: 70, float: 'left' }}>
      <Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>LT</Button>
      </Popconfirm>
      <Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>Left</Button>
      </Popconfirm>
      <Popconfirm placement="leftBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>LB</Button>
      </Popconfirm>
    </div>
    <div style={{ width: 70, marginLeft: 304 }}>
      <Popconfirm placement="rightTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
        <Button>RT</Button>

条件触发

可以判断是否需要弹出。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Popconfirm, Switch, message } from 'choerodon-ui';
​
class App extends React.Component {
  state = {
    visible: false,
    condition: true, // Whether meet the condition, if not show popconfirm.
  }
​
  changeCondition = (value) => {
    this.setState({ condition: value });
  }
​
  confirm = () => {
    this.setState({ visible: false });
    message.success('Next step.');
  }
​
  cancel = () => {
    this.setState({ visible: false });
    message.error('Click on cancel.');
  }
​
  handleVisibleChange = (visible) => {
    if (!visible) {
      this.setState({ visible });
      return;
    }
    // Determining condition before show the popconfirm.

API

更多属性请参考 Tooltip。

注意

请确保 Popconfirm 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。