阻止Form表单按Enter提交
问题描述:
Form表单如果存在textFiel这类可以通过Enter快捷键确定的组件,会触发提交表单。
Form代码如下
<Form onSubmit={onSubmit}>
{({ formProps, submitting }) => (
<form {...formProps} style={{height: '100%',overflow: 'auto'}}>
<Field
label="CHART TITLE"
name="chartTitle"
isRequired
defaultValue=""
>
{({ fieldProps }) => (
<Fragment>
<TextField
{...fieldProps}
pattern=".{0,20}"
data-testid="nativeFormValidationTest"
aria-label="write you chart title"
placeholder="输入的内容少于20个字符."
/>
</Fragment>
)}
</Field>
<br/>
<ButtonGroup>
<Button type="submit" isDisabled={submitting}>Save</Button>
<Button appearance="subtle" onClick={view.close}>Cancel</Button>
</ButtonGroup>
</form>
)}
</Form>
解决方法
通过键盘按键事件捕获Enter的code,再调用preventDefault去阻止接下来的冒泡事件。