---
name: Popconfirm
menu: Components
---

# Popconfirm
import Popconfirm from './index'
import './style/index.scss'
import Button from '../button/index'
import { Playground, Props } from 'docz'

## Props & Methods
<Props of={Popconfirm}/>

## Basic Usage
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                visible: false,
            }
            this.handleClick = this.handleClick.bind(this);
            this.getTarget = this.getTarget.bind(this);
        }
        handleClick() {
            this.setState({
            visible: ! this.state.visible,
            });
        }
        getTarget(index) {
            return () => document.getElementsByClassName(`button-target${index}`)[0];
        }
        render(){
            return <>
                <Button
                onClick={this.handleClick}
                className="button-target0"
                >默认</Button>
                <Popconfirm
                    visible={this.state.visible}
                    content="美丽的泡沫，只是一霎烟火"
                    getTarget={this.getTarget(0)}
                />
            </>
        }
    }
    return <Example/>
}
}
</Playground>

## 12 Placement
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                visible1: false,
                visible2: false,
                visible3: false,
                visible4: false,
            }
            this.handleClick1 = this.handleClick1.bind(this);
            this.handleClick2 = this.handleClick2.bind(this);
            this.handleClick3 = this.handleClick3.bind(this);
            this.handleClick4 = this.handleClick4.bind(this);
            this.getTarget = this.getTarget.bind(this);
        }
        handleClick1() {
            this.setState({
            visible1: ! this.state.visible1,
            });
        }
        handleClick2() {
            this.setState({
            visible2: ! this.state.visible2,
            });
        }
        handleClick3() {
            this.setState({
            visible3: ! this.state.visible3,
            });
        }
        handleClick4() {
            this.setState({
            visible4: ! this.state.visible4,
            });
        }
        getTarget(index) {
            return () => document.getElementsByClassName(`button-target${index}`)[0];
        }
        render(){
            return <>
                <Button
                onClick={this.handleClick1}
                className="button-target1"
                >Left</Button>
                <Popconfirm
                    visible={this.state.visible1}
                    content="美丽的泡沫，只是一霎烟火"
                    getTarget={this.getTarget(1)}
                    placement='left'
                />
                <Button
                onClick={this.handleClick2}
                className="button-target2"
                >Top</Button>
                <Popconfirm
                    visible={this.state.visible2}
                    content="美丽的泡沫，只是一霎烟火"
                    getTarget={this.getTarget(2)}
                    placement='top'
                />
                <Button
                onClick={this.handleClick3}
                className="button-target3"
                >Bottom</Button>
                <Popconfirm
                    visible={this.state.visible3}
                    content="美丽的泡沫，只是一霎烟火"
                    getTarget={this.getTarget(3)}
                    placement='bottom'
                />
                <Button
                onClick={this.handleClick4}
                className="button-target4"
                >Right</Button>
                <Popconfirm
                    visible={this.state.visible4}
                    content="美丽的泡沫，只是一霎烟火"
                    getTarget={this.getTarget(4)}
                    placement='right'
                />
            </>
        }
    }
    return <Example/>
}
}
</Playground>

## With Title and Content
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                visible: false,
            }
            this.handleClick = this.handleClick.bind(this);
            this.handleClose = this.handleClose.bind(this);
            this.getTarget = this.getTarget.bind(this);
        }
        handleClick() {
            this.setState({
            visible: ! this.state.visible,
            });
        }
        handleClose() {
            this.setState({
            visible: false,
            });
        }
        getTarget(index) {
            return () => document.getElementsByClassName(`button-target${index}`)[0];
        }
        render(){
            return <>
            <Button
                onClick={this.handleClick}
                className="button-target5"
            >A complex Popconfirm!</Button>
            <Popconfirm
                visible={this.state.visible}
                title="This is the title"
                button={[
                <Button onClick={this.handleClose} size="s" key="confirm">Confirm</Button>,
                <Button onClick={this.handleClose} size="s" key="cancel">Cancel</Button>,
                ]}
                content="This is the content"
                placement="top"
                getTarget={this.getTarget(5)}/>
            </>
        }
    }
    return <Example/>
}
}
</Playground>

## Customize the placement
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                visible: false,
            }
            this.handleClick = this.handleClick.bind(this);
            this.getTarget = this.getTarget.bind(this);
        }
        handleClick() {
            this.setState({
            visible: ! this.state.visible,
            });
        }
        getTarget(index) {
            return () => document.getElementsByClassName(`button-target${index}`)[0];
        }
        render(){
            return <>
                <Button
                onClick={this.handleClick}
                className="button-target6"
                >Customized</Button>
                <Popconfirm
                    visible={this.state.visible}
                    content="美丽的泡沫，只是一霎烟火"
                    align={{
                        points: ['cc', 'cc'],
                        offset: [30, 45],
                    }}
                    getTarget={this.getTarget(6)}
                />
            </>
        }
    }
    return <Example/>
}}
</Playground>

## Inline
<Playground>
    <Popconfirm
        visible={true}
        content="I am an inline Popconfirm! Isn't it pretty?"
        inline
        />
</Playground>