如何禁用< ENTER>在react-bootstrap中提交表单的密钥 [英] how to disable <ENTER> key for form submit in react-bootstrap

问题描述

在以下代码段中，我有许多类型为text的输入表单.如果用户点击，则好像我收到了与他们按下提交"按钮一样的综合事件.我想忽略表单提交，而只允许按下SUBMIT按钮. (我删除了一些表格组以简化示例).

In the following snippet, I have a number of input forms that are type text. If the user hits , it seems I am getting the same synthetic event as if they press the submit button. I want to ignore the as a form submit, and only allow one to press the SUBMIT button. (I deleted some of the Form Groups to cut down on the example).

在所有情况下(按钮或ENTER键)

In all cases (button or ENTER key)

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

推荐答案

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

Maybe should insert button with type "button" instead "submit"? and then just handle onClick for this button?

这篇关于如何禁用< ENTER>在react-bootstrap中提交表单的密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！