Material-ui 对话框中的表单未在 Enter 上提交

Question

我有一个带有两个按钮的模式对话框，其中一个应该用作提交按钮。 我也希望 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&apos;m done here</Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};

单击按钮有效，Enter 无效。我尝试将form 放在DialogActions 中——结果相同。

Answer 1

如果e.keyCode 是13（这是Enter 的键码），您可以监听keyup 事件并告诉Dialog 提交和关闭

<Dialog
  onKeyUp={(e) => {
    const ENTER = 13;
    console.log(e.keyCode)

    if (e.keyCode === ENTER) {
      props.onSubmit();
      props.onClose();
    }
  }}
>
  {...}
</Dialog>

编辑：如果您点击 Enter，onsubmit 事件将在 inputs 或提交 button 处于焦点时触发。您可以将autofocus 添加到提交Button 中，这样当Dialog 打开时，Button 将默认聚焦。然后，用户可以在按钮处于焦点时按 Enter 关闭对话框

<Button
  autoFocus
  type="submit"
>

现场演示