为什么 onSubmit 不适用于我的 React-Bootstrap 表单？

Question

我有一个表单，希望人们在其中放置电子邮件和消息。我将表单元素的onSubmit参数设置为我自己的函数，但是，表单似乎仍在使用默认的onSubmite函数，因为每当我单击提交按钮时，页面总是刷新，并且不会打印出我在onSubmit函数中要打印的内容。

仔细查看表单的事件函数，我可以看到有一个onSubmit函数是我想要做的，还有一个submit函数是刷新页面的。出于某种原因，它从来没有运行过我的功能(我从来没有看到我在控制台上记录的内容(！

这是我的代码：

表单材料：

<Card style={{marginLeft:"20%", marginRight:"20%"}}>
<Card.Body>
<Card.Title>Leave a Comment</Card.Title>
<Form onSubmit={this.email} id="comments">
<Form.Group>
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="[e-mail]" />
</Form.Group>
<Form.Group>
<Form.Label>Message</Form.Label>
<Form.Control as="textarea" rows="3"/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Card.Body>
</Card>

电子邮件功能：

email = () => {
console.log("hello there I am working");
}

我看到了一个变通方法，它说将表单包围在这样的div中：

<div
onKeyDown={e => e.stopPropagation()}
onClick={e => e.stopPropagation()}
onFocus={e => e.stopPropagation()}
onMouseOver={e => e.stopPropagation()}
onSubmit={e => e.stopPropagation()}
... can add other events if they are giving you issues
>

但这也没用。有什么问题吗？

Answer 1

您应该阻止函数内部的默认表单提交，该函数在使用.preventDefault()方法提交时被调用。

在您的情况下，它是email函数，称为onSubmit。如下图所示修改您的电子邮件功能可能会解决您的问题

email = (e) => {
e.preventDefault();
console.log("hello there I am working");
}