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

我无法按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>

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

当我注释“后退”按钮时，它工作正常，即表单正在提交（我可以使用preventDefault（）控制它）

---

当表单中存在链接时，如何使用表单提交？

为什么不将

链接

放在

表单

组件之外？

链接

不提供表单的任何价值，也不满足表单的任何要求。

表单

用于收集用户的输入。

链接

只是一个后退按钮，让它成为后退按钮吧

出于美学目的，这些差异可以忽略不计

  <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>

可能的解决办法：

• 更改按钮的位置时，按钮不能是第一个元素 在表单内部

• 将按钮放置在表单元素外部

• 绑定事件以输入密钥，然后从事件提交表单

• 将

  type=“button”

  属性添加到按钮而不更改其属性
  位置

---

没有足够的信息提供帮助，但我会尝试将
放在您的
末尾。如果这解决了您的问题，您可以推断何时是第一个元素，它是第一个交互元素，按enter键将单击该元素而不是“提交”按钮。干杯。@BhargavShah但我不能在任何地方放置按钮。为什么我要更改表单的ui。我也可以使用输入按键事件，然后提交表单，但这不是一般的解决方案。你不应该这样做，那是为了调试和发现问题。如果您提供更多信息，可能是您的设置的在线回复，我将能够更好地帮助您。@BhargavShah是的，当我更改其位置时，它也会工作，当我删除/注释返回按钮代码时。您能告诉我为什么它会以这种方式工作吗？为什么会触发第一个按钮form@LulzAsh因为在表单中定义按钮时，它隐式地具有“提交”类型。因为链接中有一个按钮，它是表单中的第一个按钮。您的表单决定此按钮将在表单提交时执行。因此忽略底部的实际提交按钮。是！！！该按钮是一个提交按钮（这是除Internet Explorer之外的所有浏览器的默认按钮）。很好。看起来你自己做了一些研究@卢扎什：）

  <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>

<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>