reactjs - 如何防止输入键触发提交
问题描述
我Formik
在应用程序中使用了一个小表格React
。
handleSubmit
当用户按下回车键时触发该方法。
有没有办法防止这种触发?我在formik文档中没有找到任何东西......
谢谢。
解决方案
你可以像这样添加一个onKeyDown
处理程序:
/**
* Stop enter submitting the form.
* @param keyEvent Event triggered when the user presses a key.
*/
function onKeyDown(keyEvent) {
if ((keyEvent.charCode || keyEvent.keyCode) === 13) {
keyEvent.preventDefault();
}
}
/**
* Sample form component.
*/
function Example() {
return (
<Formik initialValues={{ name: "" }} onSubmit={() => console.log("Submit")}>
<Form onKeyDown={onKeyDown}>
<div>
<label htmlFor="name">Name</label>
<Field id="name" name="name" type="text" />
</div>
<button type="submit">Submit</button>
</Form>
</Formik>
);
}
请参阅此处的 CodeSandbox示例。
推荐阅读
- python - 告诉模板目录的位置时在 Django settings.py 中使用撇号
- python - Pyephem 海拔似乎是错误的
- google-chrome - NET::ERR_CERT_AUTHORITY_INVALID 访问 google.com(仅在 chrome 中)
- node.js - 查询事件数组以查找我添加的事件是否重叠(Express/Mongoose)
- sql - 在处理列表时更好地替代“Where”子句中的 SQL“或”语句?
- javascript - 如何链接 HTML 字符串中的单词并在 VueJS 2 中为它们分配 @click 方法?
- java - 避免使用泛型进行未经检查的强制转换
- node.js - Node.js 错误:找不到模块 './decimal128'
- excel - 为相似值创建突出显示单元格规则
- php - 在帖子中丢失输入字段表单数据