时间戳

首页 > 解决方案 > React 中使用 `useState` 来管理表单是否已提交是否正常？

reactjs - React 中使用 `useState` 来管理表单是否已提交是否正常？

问题描述

一个基本的在线 React 教程演示了如何创建一个包含 3 个字段（名字、姓氏和电子邮件）的基于 React 的表单。令我惊讶的是，它必须useState管理是否已提交表单，并使用该表单来决定是否显示成功消息。

请注意，它不会进行实际的表单提交（即没有 API 调用），所以我想知道它是否在这里仅将状态用于模拟目的。

这是一个片段：

const [submitted, setSubmitted] = useState(false);
...
{submitted && !values.lastName && <span id='last-name-error'>Please enter a last name</span>}
...
{showSuccess && <div class='success-message'>Success! Thank you for registering</div>}
...

现实世界的 React 应用程序useState管理是否已提交简单的表单（例如“联系我们”或“反馈”等）是否正常？我的猜测是通常没有必要这样做。

作为生成的 API 调用，“成功”或“失败”都可以简单地用于显示错误消息的状态。此后，理想情况下，表单应自行重置以允许再次提交。因此，无需存储提交表单的状态。我的理解正确吗？

标签： reactjsformsvalidation

解决方案

你的问题有点令人困惑。基本上，如果您想在 React 中存储数据并且该数据对您的应用程序有直接影响，您通常应该将其保存在 state 中。当您提交表单时，表单onSubmit事件处理程序将被调用，您可以在该事件处理程序中执行所有操作。很明显，教程中的提交状态是一个标志来模拟获取过程。通常，当您要处理提交表单和获取 API 时，您应该在状态中存储 2 个项目：

错误和加载

您应该使用 loading 标志在获取 API 期间显示加载指示器，并使用 error 检查是否存在任何错误存储并显示它。如果 API 成功获取，您可以将用户重定向到另一个页面，显示通知或更改您所在状态的某些数据。由你决定。但请确保submitted您的教程中的状态只是一个示例和模拟。但它在现实世界中有实际用途！希望能帮助到你！

这是一个示例：我想通过获取 api 添加用户，如果 api 获取成功，我想将其添加到列表中：

沙盒

推荐阅读