[英]how to disable <ENTER> key for form submit in react-bootstrap
在以下代码段中,我有许多输入 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
最简单的解决方案是使用type="button"
而不是type="submit"
。
也许应该插入“按钮”类型的按钮而不是“提交” ? 然后只需处理onClick
这个按钮?
我找到了解决方法如何在不使用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) }}>
<Button type="button">...</Button>
将类型从提交更改为按钮
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.