3

我有一个表格，我希望人们在其中放置他们的电子邮件和消息。我将表单元素的 onSubmit 参数设置为我自己的函数，但是，看起来表单仍在使用默认的 onSubmit 函数，因为每当我单击提交按钮时页面总是刷新，并且不会打印出我说的话在我的 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>

电子邮件功能：

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
>

但这也没有用。关于出了什么问题的任何想法？

4

1 回答 1

3

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

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

email = (e) => {
    e.preventDefault();
    console.log("hello there I am working");
}
于 2020-07-19T17:06:15.223 回答