嗨，有反应的人！今天，我想逐步介绍如何在React中使用模式。不要害怕，因为我会以如此清楚的方式指导您完成每一步，以至于您亲爱的奶奶（或妈妈...）都会说，“我可以编码！”因此，请阅读以显示“如何”展示和隐藏模式，处理表格提交。准备好？让我们深入研究（对我：有时仍然令人困惑的）反应模式的世界！

• 步骤1：首先，我们要设置一个React项目。假设您已经在一个人工作，我会跳到下一部分

• 步骤2：我们需要导入一些依赖项。
  我们的项目“取决于”，没有它，它将行不通。告诉你的祖母，就像试图烤蛋糕没有面粉...

我们将在页面顶部导入某些东西。 （反应，'usestate'钩子和其他您可能需要的依赖性
（这就像收集所有成分，以便在需要时准备好它们）

- 步骤3：让我们定义组件，在这种情况下，我们将其称为“ FormComponent

”

• 步骤4：设置OP我们的状态。 我们使用状态跟踪在表单字段中输入的值。这就像拥有一个智能助手，可以记住用户的输入，直到我们需要它。使用USESTATE挂钩，我们创建一个称为“值”的状态变量，以存储表单值和称为SetValues的函数以更新该状态。这有助于我们使应用程序更具互动性和响应性。 我使用的输入值可以将其更改为您将在表单中使用的值。

• 步骤5：处理我们的输入字段的变化 每当我们在输入字段中添加一个字符时，我们都需要确保其在USESTATE中进行更新。这就是为什么我们创建一个函数来处理此更改并相应地将其存储在美国。

• 步骤6：处理表单提交 因此，每当我们填写整个表格时，我们都需要将其发送到背面的某个地方，以便对其进行处理和照顾。 （祖母：考虑写一封信，将其放在邮箱中，让邮递员进一步照顾

• 步骤7（几乎在那里）：显示和隐藏模态 关于模态的事情是，它为您提供了项目上的额外闪光，而不必为形式创建整个新页面。您打开它，在后台查看页面的其余部分，但重点在于模态。在层中考虑一下，您的模态将是打开时的顶层，背景将是下面的层。

因此，首先，我们首先制作2个功能，一个可以打开它，一个可以关闭它。

• 步骤8：渲染组件 如果我们想查看Mdoal，我们需要渲染它，以便用户能够看到并与之互动。

这是我们开始返回事物的地方，以便用户可以看到它。

在此示例中，我将“+”标记作为打开模式的按钮。我们将添加一个“ on Click”事件，该事件将触发“ Show Modal”函数。
请注意“模态隐藏”是为模态设计的。当“隐藏”时，我们看不到它。当我们按'+'按钮时，className将为'模态'。

• 步骤9（请耐心3，还有3个要去）：打开时实现模态的内容 您可以使用页面上需要的输入来更改我的输入。此步骤是我们将在模式中放入内容以显示给用户。

• 步骤10：让我们添加我们的表单输入字段！

您可以将表单输入tyoes更改为您在我们的需要使用的任何东西，这只是您可以使用的一些示例。
请注意，我们将上面创建的函数称为“ handlesubmit”，以执行我们要添加的按钮时需要做的工作！

• 步骤11：最后一步！让我们添加我们的魔术按钮，他将无需任何其他代码处理所有内容.....开玩笑，如果只是在后端这么简单...

et voila，模态已准备就绪。您可以根据需要设计模态。我使用了一个模糊了下面的层的覆盖层。
在下面，我在项目中使用了模态的模式。

谢谢您的阅读！
奶奶，我尽力解释它。我保证...但是有时我什至没有得到我在做的事情的一半;）

最亲切的问候，
Jitske de herdt