Question

我有一个表格，我希望人们在此放置他们的电子邮件和消息。我将表单元素的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
>

但是那也不起作用。有什么问题的想法吗？

Answer 1

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

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

onSubmit

React-Bootstrap表单onSubmit不起作用

1 个答案: