当存在 Link 时，输入密钥表单提交不起作用

Question

我无法在按下回车键时提交表单

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

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

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

当 link 出现在表单中时，我如何使用表单 onSubmit？

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

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

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

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

Answer 2

可能的解决方案：

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

当存在 Link 时，输入密钥表单提交不起作用

Enter key form submit not working when Link is present

form-submit

reactjs

reactstrap