Reactjs 在Submit不工作时对引导窗体作出反应

我有一个表格，我想让人们把他们的电子邮件和信息。我将表单元素的onSubmit参数设置为我自己的函数，但是，看起来表单仍然使用默认的onSubmit函数，因为每当我单击submit按钮时，页面总是刷新，并且不会打印出我要在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="name@example.com" />
            </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>

我看到一个变通方法，它说在一个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
>

e.stopPropagation（）}
onClick={e=>e.stopPropagation（）}
onFocus={e=>e.stopPropagation（）}
onMouseOver={e=>e.stopPropagation（）}
onSubmit={e=>e.stopPropagation（）}
... 如果他们给您带来问题，可以添加其他事件
>

---

但这也不起作用。有什么问题吗？

您应该防止在函数中使用

.preventDefault（）

方法调用默认表单submit

在您的例子中，是名为

onSubmit

的

email

功能。如下图所示修改电子邮件功能可能会解决您的问题

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

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