在 react 中使用 preventDefault 和自定义钩子答案

【问题标题】：Using preventDefault with a custom hook in react在 react 中使用 preventDefault 和自定义钩子
【发布时间】：2021-01-20 21:32:55
【问题描述】：

我是一名 React 初学者。我正在尝试增强我使用钩子所做的表单教程。我重构了代码，使输入和按钮都是一个单独的组件。我还重构了钩子，使每个钩子都在一个单独的文件中。我遇到的问题是 useSubmitted 自定义挂钩 (hooks/useSubmitted.js) 文件中的 handleSubmit 方法。我不断收到错误TypeError: event.preventDefault is not a function。我已经尝试修复它并在 Google 中寻找解决方案，但无济于事。

Here is the link

任何帮助将不胜感激。

谢谢

【问题讨论】：

有点不清楚您要做什么。您返回一个 handleSubmit 函数，该函数（可能）采用表单的提交事件对象，然后在您的应用程序代码中立即将一个布尔值传递给它，handleSubmit(submitted)。布尔值不会有 preventDefault 属性。
抱歉，我正在尝试使用不同的方法来修复 preventDefault 问题。

标签： reactjs react-hooks

【解决方案1】：

我只是想知道您为什么使用 preventDefault 功能。按照您的代码，handleSubmit 函数中名为 event 的参数与 useSubmitted 函数组件中的提交状态相同。看来你对preventDefault函数和用法有误解。

请参考这篇文章。 https://github.com/ankeetmaini/simple-forms-react

【讨论】：

【解决方案2】：

有几个问题：

您在 JSX 中调用了 handleSubmit 函数。它是一个钩子，所以它在 body 函数中被调用，然后你就可以访问那里的返回值
您在App.js 中使用了有效性钩子，但实际上您在提交的钩子中使用了它，因为它只应在有效时提交。所以你在App.js 中不需要它
您提前关闭了<form/>，所以出现了语法错误

看看the changes in this sandbox，特别是App.js 里面的那些。应该有必要的修复。

顺便说一句，这些钩子的布局方式不太合理。表单的有效性和提交应该是一起的，因为它们是相互依赖的。有单独的钩子不太有意义。表单值决定了有效性，而有效性决定了提交的能力。

【讨论】：

我查看了您的代码，非常有帮助。是的，您对有效性和提交之间的联系是正确的。谢谢你。现在的问题在于 onSubmit 调用。当我单击按钮时，它什么也不做。当我完成教程时，所有内容都在 App.js 文件中（这不是很好的代码）并且单击按钮有效。现在没有了。您在此处发布的更改的链接中没有输出错误。有什么建议？谢谢
Button组件的type改了吗？在您的原始沙箱中，您拥有<Button ... type='button' />。你需要有<Button type='submit' ... />。你也可以在我的沙箱中检查一下
嗨，是的，我也检查了你的沙箱。我发现了问题所在。问题是在 hooks/useSubmitted.js 文件中 handleSubmit 方法的 if 条件下。该钩子不接收任何用户为值对象输入的值，因此 if 条件永远不会为真。有什么建议吗？对不起。再次感谢您的帮助。
是的，原因是钩子的每一次使用都独立于其他所有使用。因此，当您执行useFormValues 时，每个钩子用法之间的值彼此分开。因此，App.js 中的值挂钩会在您键入时获取新值，但useSubmitted 中的值挂钩根本不会改变。这又回到了我回答的最后一段的重点：将表单中的值、有效性和提交分离到单独的钩子并没有真正意义，因为它们都是相互依赖的。
这就是为什么如果您使用formik 或react-hook-form 之类的表单库，您会看到有一个single 上下文挂钩可以返回所有表单信息，包括表单值、设置这些值的辅助函数、表单的有效性、提交计数等。

【解决方案3】：

handleSubmit 需要 event 类型的参数，而您将其 submitted 类型设为 boolean。您可以从

获取类型 event.preventDefault()

<form onSubmit={handleSubmit} />

或

<form onSubmit={(event) => handleSubmit(event)} />

【讨论】：

【解决方案4】：

将handleSubmit 函数作为onsubmit 传递给表单

<form onSubmit={handleSubmit}>

【讨论】：