Question

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

Here is the link

任何帮助将不胜感激。

谢谢

Answer 1

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

<form onSubmit={handleSubmit}>

Answer 2

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

获取类型 event.preventDefault（）

<form onSubmit={handleSubmit} />

或

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

Answer 3

有一些问题：

您正在JSX内部调用handleSubmit函数。这是一个钩子，因此在body函数内部被调用，然后您就可以在那里访问返回的值
您在App.js中使用了有效性挂钩，但实际上您在已提交的挂钩中使用了该挂钩，因为它仅在有效时才提交。因此，App.js
您提前关闭了<form/>，所以出现了语法错误

看看the changes in this sandbox，特别是App.js中的内容。应该有必要的修复程序。

请注意，这些钩子的布局方式不太合理。表格的有效性和提交应结合在一起，因为它们是相互依赖的。拥有单独的钩子并不太有意义。表单值决定了有效性，有效性决定了提交的能力。

Answer 4

我只是想知道为什么要使用preventDefault函数。按照您的代码，handleSubmit函数中名为event的参数与useSubmitted函数组件中的提交状态相同。似乎您对preventDefault函数及其用法有误解。

请参阅本文。 https://github.com/ankeetmaini/simple-forms-react

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

4 个答案: