reactjs - 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

您可以收听 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"
>

现场演示