迹忆客 专注技术分享

在开发 Web 应用程序时，有时我们必须在执行操作（例如删除用户）之前向用户提示确认对话框。

创建多个对话框效率低下，并且很难跨组件维护一堆重复的逻辑。 让我们从头开始创建我们自己的 useConfirm 钩子。

简单版——带有“window.confirm()”

如果对对话框组件的外观没有 UI 要求，则可以使用 JavaScript 内置的 confirm() 函数轻松创建。

function useConfirm(message, onConfirm, onAbort) {
  const confirm = () => {
    if(window.confirm(message))
      onConfirm();
    else
      onAbort();
  }
  return confirm
}
function App() {
  const handleDelete = () => {/* ... */};
  const handleAbort = () => {/* ... */};
  const confirmDelete = useConfirm(
    'Sure?',
    handleDelete,
    handleAbort,
  );
  return <button onClick={confirmDelete}>Delete User</button>
}

即使它根本不是一个钩子（它没有使用任何 React 钩子，例如 useState），但它在正常情况下应该可以正常工作。

window.confirm() 会阻塞浏览器的线程并冻结 UI 的更新。

高级版——带有 “Promise”

在大多数情况下，我们在项目中使用 UI 库（例如 Material-UI）来实现更好的用户界面。 带有 JavaScript 的 Promise API 的自定义钩子帮助我们将组件的逻辑与确认对话框分开。

import {
  Button, Dialog, DialogActions,
  DialogContent, DialogContentText, DialogTitle,
} from '@mui/material';
import { useState } from 'react';
const useConfirm = (title, message) => {
  const [promise, setPromise] = useState(null);

  const confirm = () => new Promise((resolve, reject) => {
    setPromise({ resolve });
  });

  const handleClose = () => {
    setPromise(null);
  };

  const handleConfirm = () => {
    promise?.resolve(true);
    handleClose();
  };

  const handleCancel = () => {
    promise?.resolve(false);
    handleClose();
  };
  // You could replace the Dialog with your library's version
  const ConfirmationDialog = () => (
    <Dialog
      open={promise !== null}
      fullWidth
    >
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleConfirm}>Yes</Button>
        <Button onClick={handleCancel}>Cancel</Button>
      </DialogActions>
    </Dialog>
  );
  return [ConfirmationDialog, confirm];
};

export default useConfirm;

在上面的代码中，我们在 useConfirm 钩子中声明了一个函数 confirm() 和一个对话框组件（Material-UI），并将它们作为一个数组返回。 我们可以像这样使用钩子：

function App() {
  const [Dialog, confirmDelete] = useConfirm(
    'Are you sure?',
    'Are you sure you want to delete user "Isaac Kwok"?',
  )
  const handleDelete = async () => {
    const ans = await confirmDelete()
    if (ans) {/* ... */}
    else {/* ... */}
  }
  return (
    <>
      <button onClick={handleDelete}>Delete</button>
      <Dialog />
    </>
  )
}

根据需要，我们可以在用户单击“取消”时使用 Promise.reject() 来实现，或者将

组件提升到 App 级别并使用 React Context 进行控制。

 

React hooks 非常棒，它有助于组织你的代码并提取组件之间的共享逻辑，useConfirm 值得一试，你会发现它很有用。