react对话框

In this article we will go over how to create a confirm dialog using React and Tailwind CSS. This article will roughly go over the logic in my other article, Creating a Confirm Dialog in React and Material UI, however this article will use Tailwind CSS.

在本文中，我们将介绍如何使用React和Tailwind CSS创建确认对话框。 本文将大致介绍我的另一篇文章“在React和Material UI中创建确认对话框”中的逻辑，但是本文将使用Tailwind CSS。

There comes a time in every application where you want to delete something. So like every developer, you add a button, that when clicked on, deletes the resource.

每个应用程序都有一段时间要删除某些内容。 因此，像每个开发人员一样，您添加一个按钮，单击该按钮会删除资源。

Wether it’s a blog post, a shopping cart item, or disabling an account, you want to protect against unwanted button clicks.

无论是博客文章，购物车商品还是禁用帐户，您都希望避免不必要的按钮单击。

Enter the Confirm Dialog.

输入确认对话框。

Sometimes you do want to execute an action without always prompting the user with a confirm dialog, and sometimes it can be annoying always prompting them.

有时您确实希望执行某个操作而不总是通过确认对话框提示用户，而有时总是提示他们很烦人。

Hey, do you want to do this?

嘿，你要这样做吗？

No, really, do you want to do this?

不，真的，您要这样做吗？

Sometimes, I get annoyed and tell myself, and the application. Yes! Of course I want to do the action. Why else would I have clicked on it?

有时，我会很生气，告诉自己和应用程序。 是! 我当然要采取行动。 我为什么还要点击它？

However, when it comes to deleting sensitive data, such as a blog post, I would suggest adding a confirm dialog, so the user can be alerted and can back out if they accidentally clicked on it by mistake.

但是，在删除敏感数据(例如博客帖子)时，我建议添加一个确认对话框，这样，如果用户不小心误单击了该用户，便可以收到警报并可以退出。

Before we begin, let’s look at how to achieve this is native JavaScript.

在开始之前，让我们看一下如何实现本机JavaScript。

var shouldDelete = confirm('Do you really want to delete this awesome Medium article?');if (shouldDelete) { deleteArticle();}

This will prompt a default confirm box, and prompt the user with the text, “Do you really want to delete this awesome article?”

这将提示一个默认的确认框，并向用户显示文本：“您真的要删除这篇很棒的文章吗？”

If the user clicks Yes, then it will set the shouldDelete boolean to true and run the deleteArticle function. If they click No, or Cancel, it will close the dialog.

如果用户单击“是”，则会将shouldDelete布尔值设置为true并运行deleteArticle函数。 如果他们单击“否”或“取消”，则将关闭对话框。

But the native browser implementation of the confirm dialog is kind of boring, so let’s make a version, that looks good, with React and Tailwind CSS.

但是确认对话框的本机浏览器实现有点无聊，因此让我们使用React和Tailwind CSS制作一个看起来不错的版本。

Let’s begin by creating a reusable component. You can use this in any application that uses React and Tailwind.

让我们开始创建一个可重用的组件。 您可以在任何使用React和Tailwind的应用程序中使用它。

I can also mention that I am using NextJs and Typescript to serve my React components.

我还可以提到我正在使用NextJs和Typescript服务我的React组件。

First we need to build out a Dialog component. I will be using another article to help build the basic Dialog. You can follow this article or use the component I made.

首先，我们需要构建一个Dialog组件。 我将使用另一篇文章来帮助构建基本对话框。 您可以阅读本文或使用我制作的组件。

基本对话框 (Basic Dialog)

import ExitIcon from '@components/Icons/Exit';import IconButton from '@components/Button/IconButton';interface Props { children: React.ReactNode; open: boolean; onClose: Function;}export default function Dialog(props: Props) { const { open, onClose } = props; if (!open) { return <></>; } return ( <div className="fixed inset-0 z-50 overflow-auto bg-smoke-light flex"> <div className="relative p-8 bg-white w-full max-w-md m-auto flex-col flex rounded-lg"> <div>{props.children}</div> <span className="absolute top-0 right-0 p-4"> <IconButton onClick={() => onClose()}> <ExitIcon /> </IconButton> </span> </div> </div> );}

I already had pre-made some other helper components such as an IconButton and ExitIcon.

我已经预先制作了一些其他帮助器组件，例如IconButton和ExitIcon。

图标按钮 (IconButton)

interface Props { children: React.ReactNode; onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; className?: string;}export default function IconButton(props: Props) { const { children, onClick = (event: React.MouseEvent<HTMLButtonElement>) => {}, className = '', } = props; return ( <button onClick={onClick} className={`focus:outline-none focus:border-none hover:bg-gray-400 hover:bg-opacity-25 p-2 rounded-full inline-flex items-center ${className}`} > {children} </button> );}

ExitIcon (ExitIcon)

export default function ExitIcon() { return ( <svg className="h-6 w-6 fill-current text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" > <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" /> </svg> );}

纽扣 (Button)

interface Props { children: React.ReactNode; type?: 'submit' | 'button' | 'reset'; onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; className?: string;}export default function Button(props: Props) { const { type = 'button', children, onClick, className = '' } = props; return ( <button className={`bg-primary hover:bg-primary-light text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${className}`} type={type} onClick={onClick} > {children} </button> );}

确认对话框 (Confirm Dialog)

import Dialog from './Dialog';import Button from '@components/Button/Button';interface Props { title: string; children: React.ReactNode; open: boolean; onClose: Function; onConfirm: Function; }export default function Confirm(props: Props) { const { open, onClose, title, children, onConfirm } = props; if (!open) { return <></>; } return ( <Dialog open={open} onClose={onClose}> <h2 className="text-xl">{title}</h2> <div className="py-5">{children}</div> <div className="flex justify-end"> <div className="p-1"> <Button onClick={() => onClose()} className="bg-secondary hover:bg-secondary-light" > No </Button> </div> <div className="p-1"> <Button onClick={() => { onClose(); onConfirm(); }} > Yes </Button> </div> </div> </Dialog> );}

This component will take in these props:

该组件将包含以下道具：

title — This is what will show as the dialog title

title-这将显示为对话框标题 children — This is what will show in the dialog content. This can be a string, or it can be another, more complex component.

子级-这是对话框内容中显示的内容。 这可以是字符串，也可以是其他更复杂的组件。 open — This is what tells the dialog to show.

打开—告诉对话框显示的内容。 onClose — This is a state function that will set the state of the dialog to close.

onClose —这是一个状态函数，它将设置对话框的状态为关闭。 onConfirm — This is a callback function when the user clicks Yes.

onConfirm —当用户单击“是”时，这是一个回调函数。

This is just a basic confirm dialog, you can modify it to meet your needs, such as changing the Yes or No buttons.

这只是一个基本的确认对话框，您可以对其进行修改以满足您的需要，例如更改“是”或“否”按钮。

Now let’s see how we can use this component in our application.

现在，让我们看看如何在应用程序中使用此组件。

As an example, let’s say we have a table that lists blog posts. We want a function to run when we click a delete icon, that will show this confirm dialog, and when we click Yes, it will run a deletePost function.

例如，假设我们有一个表列出了博客文章。 我们希望当单击删除图标时运行一个函数，该函数将显示此确认对话框，而当单击“是”时，它将运行一个deletePost函数。

<div> <IconButton aria-label="delete" onClick={() => setConfirmOpen(true)}> <DeleteIcon /> </IconButton> <ConfirmDialog title="Delete Post?" open={confirmOpen} onClose={() => setConfirmOpen(false)} onConfirm={deletePost} > Are you sure you want to delete this post? </ConfirmDialog></div>

In this component, we need to implement the ConfirmDialog with the props open, onClose, and onConfirm. Open and setOpen are controlled by using a React state, and onConfirm takes in a function called deletePost, which calls an API to delete this certain post. Implementing these are beyond the scope of this article. I will leave it up to to implement what those functions actually do.

在此组件中，我们需要使用道具open，onClose和onConfirm来实现ConfirmDialog。 Open和setOpen通过使用React状态进行控制，并且onConfirm接受一个名为deletePost的函数，该函数调用API来删除此特定帖子。 实现这些超出了本文的范围。 我将留给它来实现这些功能的实际作用。

There you have it! Pretty easy to create a reusable confirm dialog, and it looks a million times better than the default native browser dialog.

你有它！ 创建可重用的确认对话框非常容易，它看起来比默认的本机浏览器对话框好一百万倍。

Tailwind CSS笔记 (Tailwind CSS notes)

I have recently discovered Tailwind CSS and I am loving every minute of it. Tailwind CSS is a utility-first CSS framework that is easy to use and make something look great within seconds. The difference between Material UI and Tailwind CSS is that the former has a ton of prebuilt components that looks the same across apps, the latter uses utility classes that enable you to build components how you want them to look, which on different apps you can configure to each app to its own look and feel. Please check it out and leave me a comment.

我最近发现了Tailwind CSS，我喜欢它的每一分钟。 Tailwind CSS是实用程序优先CSS框架，它易于使用，并在几秒钟内使外观看起来很棒。 Material UI和Tailwind CSS之间的区别在于，前者具有大量的预构建组件，它们在应用程序之间看起来是相同的，而后者使用的实用程序类使您能够构建想要的外观的组件，而后者可以在不同的应用程序上进行配置每个应用都有自己的外观。 请检查一下并给我留言。

Also quick shout out to this website that makes SVG icons so much easier to use in your React components that utilize Tailwind CSS.

还要快速喊出这个网站，这使得SVG图标在使用Tailwind CSS的React组件中更容易使用。

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！

翻译自: https://medium.com/javascript-in-plain-english/creating-a-confirm-dialog-in-react-and-tailwind-css-3b99f6e56fab

react对话框

相关资源：React-rodal一个带动画的React模式对话框