我的onSubmit表单不起作用，可能是一个组件阻止了它，我如何获得更多诊断信息

Question

我有一个表单，里面有很多组件(我不能共享代码(。当我点击提交按钮时，onSubmit功能不会被触发。

这是onSubmit

const onSubmit = (e) => {
e.preventDefault()
console.log('a')
}

Form有点像

<form onSubmit={onSubmit}>
{many components}
<button type="submit">Submit</button>
</form>

单击该按钮在控制台中不会显示任何内容，似乎也不会执行任何操作。

我怀疑某个组件正在停止表单提交——例如，在TextField上使用required将停止onSubmit，直到您填写它——但我找不到它

有没有一种方法可以通过我可以从表单中调用的一些函数来发现哪个组件不满意，而不是遍历每个组件并找到有故障的组件？

Answer 1

尝试将事件处理程序添加到按钮本身。这应该允许您在"；单击"；在按钮上。如果你按下键盘上的回车键，表单应该会提交，因为你现在已经有了代码。

<form onSubmit={onSubmit}>
{many components}
<button type="submit" onClick={onSubmit}>Submit</button>
</form>