Material-ui 对话框内的表单未按 Enter 提交

Question

我有一个带有两个按钮的模式对话框，其中一个应该用作提交按钮。\n我Enter也想触发提交。

\n

这是我的该组件的代码：

\n

import React, { FormEvent } from 'react';\nimport { Button, Dialog, DialogActions, DialogContent, DialogContentText } from '@material-ui/core';\n\ninterface Props {\n  close: () => void;\n  onSubmit: () => void;\n}\n\nexport default (props: Props) => {\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    props.onSubmit();\n    props.close();\n  };\n\n  return (\n    <Dialog open onClose={props.close}>\n      <form onSubmit={handleSubmit}>\n        <DialogContent>\n          <DialogContentText>\n            You are about to submit the text. Are you sure you are done?\n          </DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button type="button" color="primary" variant="outlined" size="small">No, there is more to do</Button>\n          <Button type="submit" color="primary" variant="contained" size="small">Yes, I&apos;m done here</Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n

\n

单击按钮有效，Enter无效。我尝试将 \xe2\x80\x94 放在form里面DialogActions相同的结果。

\n

Answer 1

您可以监听该keyup事件并告诉Dialog提交并关闭 if e.keyCodeis 13（这是 的关键代码Enter）

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

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

编辑：如果您点击Enter，当s 或提交处于焦点状态onsubmit时，事件将触发。您可以添加到提交，这样当打开时，默认情况下将获得焦点。然后，用户可以在按钮处于焦点状态时按 Enter 键关闭对话框inputbuttonautofocusButtonDialogButton

<Button
  autoFocus
  type="submit"
>

现场演示