阻止Form表单按Enter提交

阻止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去阻止接下来的冒泡事件。

参考：
onkeydown 事件
preventDefault() 方法