我有一个带有两个按钮的模态对话框,其中一个应该用作提交按钮。 我也想要 Enter 来触发提交。
这是我的这个组件的代码:
import React, { FormEvent } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText } from '@material-ui/core';
interface Props {
close: () => void;
onSubmit: () => void;
}
export default (props: Props) => {
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
props.onSubmit();
props.close();
};
return (
<Dialog open onClose={props.close}>
<form onSubmit={handleSubmit}>
<DialogContent>
<DialogContentText>
You are about to submit the text. Are you sure you are done?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button type="button" color="primary" variant="outlined" size="small">No, there is more to do</Button>
<Button type="submit" color="primary" variant="contained" size="small">Yes, I'm done here</Button>
</DialogActions>
</form>
</Dialog>
);
};
点击按钮有效,Enter 无效。我尝试将 form
放入 DialogActions
— 结果相同。
最佳答案
您可以收听 keyup
事件并告诉 Dialog
如果 e.keyCode
则提交并关闭是13
(这是 Enter 的关键代码)
<Dialog
onKeyUp={(e) => {
const ENTER = 13;
console.log(e.keyCode)
if (e.keyCode === ENTER) {
props.onSubmit();
props.onClose();
}
}}
>
{...}
</Dialog>
编辑:如果您点击Enter,onsubmit
input
时事件将触发s 或提交 button
是专注的。您可以添加 autofocus
提交Button
所以当Dialog
打开Button
默认情况下会聚焦。然后,当按钮处于焦点状态时,用户可以通过按 Enter 键关闭对话框
<Button
autoFocus
type="submit"
>
现场演示
关于reactjs - material-ui 对话框内的表单未在 Enter 上提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64498415/