存在链接时，输入密钥表单提交不起作用答案

【问题标题】：Enter key form submit not working when Link is present存在链接时，输入密钥表单提交不起作用
【发布时间】：2019-08-10 05:42:00
【问题描述】：

我无法按 Enter 键提交表单

<Form onSubmit={this.handleFormSubmit}>

    <Link to="/back"><Button> Back</Button></Link> // back button

    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>

    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>

</Form>

回车键必须触发此功能

handleFormSubmit = event => {
    event.preventDefault();
    // more core here
}

当我按下回车键时，带有链接的表单中的后退按钮正在执行。

当我评论后退按钮时，它工作正常，即表单正在提交（我可以使用 preventDefault() 来控制它）。

当表单中存在链接时，我如何使用表单 onSubmit ？

【问题讨论】：

没有足够的信息可以提供帮助，但我会尝试将<Link /> 放在<Form /> 的末尾。如果这解决了您的问题，您可以推断当是第一个元素时，它是第一个 interactive 元素，并且按下回车键会单击它而不是您的提交按钮。干杯。
@BhargavShah 但我不能在任何地方放置按钮。我为什么要更改表单的ui。我也可以使用输入按键事件，然后提交该表单，但这不是通用解决方案。
你不应该，那是调试和发现问题。如果您提供更多信息，可能是您设置的在线 REPL，我将能够为您提供更好的帮助。
@BhargavShah 是的，当我改变它的位置时，它也在我删除/评论后退按钮代码时工作。

标签： reactjs form-submit reactstrap

【解决方案1】：

为什么不把Link 放在Form 组件之外呢？从纯粹的功能角度来看，Link 不提供任何价值或满足表单的任何要求。 Form 旨在收集用户的输入。 Link 只是一个后退按钮，让它成为一个后退按钮。

出于审美目的，差异可以忽略不计。

  <div>
    <Link to="/back"><Button> Back</Button></Link> // back button
    <Form onSubmit={this.handleFormSubmit}>
        <FormGroup>
            <Label htmlFor="name">Name</Label>
            <Input name="name" type="text"/>
        </FormGroup>

        <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
        <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
    </Form>
  </div>

因为当您在表单中定义一个按钮时，它隐含了一种“提交”类型。由于您的Link 中有一个按钮，并且它是表单中的第一个按钮，因此您的表单决定这是在表单提交时执行的按钮。因此忽略底部的实际提交按钮。

您可以通过按照您的建议为Link 标记中的按钮指定一种“按钮”来解决此问题。因此，表单将进一步向下移动以找到另一个按钮。

<Form onSubmit={this.handleFormSubmit}>
    <Link to="/back"><Button type="button"> Back</Button></Link> // back button
    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>
    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
</Form>

【讨论】：

你能告诉我为什么它会以这种方式运行吗？为什么它会触发表单的第一个按钮
@LulzAsh 因为当您在表单中定义按钮时，它隐含地具有“提交”类型。由于您的链接中有一个按钮，它是表单中的第一个按钮。您的表单决定这是将在表单提交时执行的按钮。因此忽略底部的实际提交按钮。
是的！该按钮是一个提交按钮（这是所有浏览器的默认设置，Internet Explorer 除外）。
不错。看来你自己做了一些研究。 @LulzAsh :)

【解决方案2】：

可能的解决方案：

改变按钮的位置，按钮不能是第一个元素在表单中。
将按钮放置在表单元素之外。
绑定事件输入key，然后从事件提交表单。
将type="button" 属性添加到按钮而不更改其
位置。

【讨论】：