如何禁用<enter> react-bootstrap 中表單提交的關鍵</enter>

Question

在以下代碼段中，我有許多輸入 forms 是文本類型。 如果用戶點擊，我似乎得到了與他們按下提交按鈕相同的合成事件。 我想忽略作為表單提交，只允許按下提交按鈕。 （我刪除了一些表單組以減少示例）。

在所有情況下（按鈕或 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

Answer 1

最簡單的解決方案是使用type="button"而不是type="submit" 。

Answer 2

也許應該插入“按鈕”類型的按鈕而不是“提交” ？ 然后只需處理onClick這個按鈕？

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

Answer 4

<Button type="button">...</Button>

將類型從提交更改為按鈕