如何在 react-bootstrap 中禁用表单提交的 <ENTER> 键答案

【问题标题】：how to disable <ENTER> key for form submit in react-bootstrap如何在 react-bootstrap 中禁用表单提交的 <ENTER> 键
【发布时间】：2017-10-01 17:57:17
【问题描述】：

在下面的 sn-p 中，我有许多类型为文本的输入表单。如果用户点击，我似乎得到了与他们按下提交按钮相同的合成事件。我想忽略作为表单提交，只允许一个人按下提交按钮。（我删除了一些表单组以减少示例）。

在所有情况下（按钮或 ENTER 键）

e.key is undefined
e.which is undefined
e.type is submit
e.target is the submit button

（这是一个合成事件）

const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'

const Configuration = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath }) => {
    const buttonAction = (e) => {
        e.preventDefault();
        alert(e.target.innerHTML)
    }
    return (
        <Form horizontal>
            <FormGroup controlId="serverPortBox">
                <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                        <FormControl type="number" min="1024" max="65535" placeholder={ServerPort} />
                    </OverlayTrigger>
                </Col>
            </FormGroup>
            <FormGroup controlId="dbPortBox">
                <Col componentClass={ControlLabel} sm={2}>Database Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt3">TCP port for PostGreSql DB</Tooltip>)}>
                        <FormControl type="number" min="1024" max="65535" placeholder={PortNumber} />
                    </OverlayTrigger>
                </Col>
            </FormGroup>
            <Button type="submit" bsStyle="primary" block onClick={(e) => buttonAction(e)}>Update Configuration</Button>
        </Form>
    )
}

export default Configuration

【问题讨论】：

标签： javascript reactjs forms react-bootstrap

【解决方案1】：

也许应该插入类型为 "button" 的按钮而不是 "submit"？然后只为这个按钮处理onClick？

【讨论】：

这可行，但我希望使用 redux-forms (redux-form.com/6.6.3)，我认为它们需要一种“提交”
我想你可以使用按钮类型。例如在文档中：redux-form.com/6.6.3/examples/simple 我看到带有类型按钮的按钮用于重置。但我认为您也可以尝试提交按钮
如果你遇到这个问题，我发现 github 上的这个问题非常有帮助，提供了额外的见解：github.com/erikras/redux-form/issues/572#issuecomment-268905929

【解决方案2】：

最简单的解决方案是使用type="button" 而不是type="submit"。

【讨论】：

这可行，但我希望使用 redux-forms (redux-form.com/6.6.3)，我认为它们需要一种“提交”
我不熟悉这个库，所以这可能是另一个问题的主题。但在我看来，图书馆不应该强制执行 type="submit" 之类的东西，尤其是因为 type="submit" 的默认行为通常不是现代网站的良好用户体验。
我同意你关于类型提交和现代网站的观点

【解决方案3】：

我找到了如何在不使用 type="button" 的情况下实现这一点的解决方案

const handleKeyDown = (event, callback) => {
  if (event.key === 'Enter' && event.shiftKey === false) {
    event.preventDefault();
    callback(submitAddress);
  }
};

和形式的变化：

<form onSubmit={handleSubmit(submitAddress)} onKeyDown={e => { handleKeyDown(e, handleSubmit) }}>

【讨论】：