如何捕获登出确认弹窗的「是」「否」按钮点击事件？

Hey there! To capture both the user's "Yes" (confirm logout) and "No" (cancel logout) clicks from the confirmation modal, we can use the built-in onOk and onCancel callbacks provided by the Modal.confirm component. Here's your updated code with event tracking added:

const analytics = { track: (...args) => console.log('track: ', ...args) }
const logout = () => {
  analytics.track('account_logged_out') // Tracks initial logout button click
  Modal.confirm({
    title: 'Are you sure you want to logout?',
    icon: <ExclamationCircleOutlined />,
    maskClosable: true,
    cancelText: 'No',
    cancelButtonProps: { size: 'large' },
    okText: ' Yes ',
    okButtonProps: { size: 'large' },
    onOk() {
      // Track the "Yes" confirmation action
      analytics.track('logout_confirmation', { action: 'confirm' })
      localStorage.removeItem('auth')
      setUser(null)
      Router.push('/')
    },
    onCancel() {
      // Track the "No" cancellation action
      analytics.track('logout_confirmation', { action: 'cancel' })
    }
  })
}

Key Changes Explained: #

• Added the onCancel callback to the modal configuration: This fires when the user clicks the "No" button (or closes the modal via mask, since maskClosable is true). We use analytics.track here to log the logout_confirmation event with an action property set to 'cancel'.
• Updated the onOk callback: Added the analytics.track call to log the logout_confirmation event with action: 'confirm' right before executing the actual logout logic. This ensures we capture the user's confirmation action.

Now every time a user interacts with the logout confirmation modal, you'll get a clear event indicating whether they confirmed or canceled the logout.

内容的提问来源于stack exchange，提问作者Rajan Tiwari