import React from 'react'; import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui'; () => { const onConfirm = () => { Toast.success('确认保存！'); }; const onCancel = () => { Toast.warning('取消保存！'); }; return ( <Popconfirm title="确定是否要保存此修改？" content="此修改将不可逆" onConfirm={onConfirm} onCancel={onCancel} > <Button>保存</Button> </Popconfirm> ); };

import React, { useState } from 'react'; import { Popconfirm, Radio, RadioGroup, Button } from '@douyinfe/semi-ui'; import { IconAlertTriangle } from '@douyinfe/semi-icons'; function TypesConfirmDemo(props = {}) { const typeMap = { default: { icon: <IconAlertTriangle size="extra-large" />, }, warning: { icon: <IconAlertTriangle style={{ color: 'var(--semi-color-warning)' }} size="extra-large" />, }, danger: { okType: 'danger', icon: <IconAlertTriangle style={{ color: 'var(--semi-color-danger)' }} size="extra-large" />, }, tertiary: { icon: <IconAlertTriangle style={{ color: 'var(--semi-color-tertiary)' }} size="extra-large" />, }, }; const keys = Object.keys(typeMap); const [type, setType] = useState('default'); const [visible, _setVisible] = useState(true); const changeType = e => { const type = e && e.target && e.target.value; if (type && keys.includes(type)) { setType(type); } }; const setVisible = visible => _setVisible(visible); const toggleVisible = () => setVisible(!visible); return ( <div> <RadioGroup type="button" onChange={changeType} value={type} style={{ marginTop: 14, marginBottom: 14 }}> {keys.map(key => ( <Radio key={key} value={key}> <span style={{ color: `var(--semi-color-${key === 'default' ? 'primary' : key})` }}>{key}</span> </Radio> ))} </RadioGroup> <div> <Popconfirm {...typeMap[type]} visible={visible} onVisibleChange={setVisible} trigger="custom" title="确定是否要保存此修改？" content="此修改将不可逆" > <Button onClick={toggleVisible}>点击此处</Button> </Popconfirm> </div> </div> ); }

import React from 'react'; import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui'; () => { const onConfirm = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('resolve, close popconfirm'); resolve(); }, 2000); }); }; const onCancel = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('reject, popconfirm still exist'); reject(); }, 2000); }); }; return ( <Popconfirm title="确定是否要保存此修改？" content="此修改将不可逆" onConfirm={onConfirm} onCancel={onCancel} > <Button>保存</Button> </Popconfirm> ); };

import React from 'react'; import { Button, Popconfirm, Space } from '@douyinfe/semi-ui'; () => { return ( <Space> <Popconfirm title="确定是否要保存此修改？" content="此修改将不可逆" okButtonProps={{ autoFocus: true, type: 'danger', }} > <Button>确认聚焦</Button> </Popconfirm> <Popconfirm title="确定是否要保存此修改？" content="此修改将不可逆" cancelButtonProps={{ autoFocus: true, }} > <Button>取消聚焦</Button> </Popconfirm> <Popconfirm title="确定是否要保存此修改？" content={({ initialFocusRef }) => { return <input ref={initialFocusRef} placeholder="focus here" />; }} > <Button>内容聚焦</Button> </Popconfirm> </Space> ); };