在 react.js 中使用帶有“@material-ui/core/Button”的 Enter 鍵提交表單

Question

這是我在渲染方法中的表單，用於用戶登錄。

<form onSubmit={this.handleSubmit}>
  <Avatar className={classes.avatar}>
    <LockOutlinedIcon />
  </Avatar>
  <Typography component="h1" variant="h5">
    Sign in
  </Typography>

  <TextField variant="outlined" margin="normal" fullWidth id="email"
    label="Email Address" name="email" onChange={this.handleEmailChange}
  />
  <TextField variant="outlined" margin="normal" fullWidth
    name="password" onChange={this.handlePasswordChange}
  />
  {loginError && (
    <Typography component="p" className={classes.errorText}>
      Incorrect email or password.
    </Typography>
  )}

  <Button type="button" fullWidth variant="contained" color="primary"
    className={classes.submit} onClick={this.handleSubmit}
  >
    Sign In
  </Button>
</form>

以下是我的句柄提交方法。

handleSubmit = () => {
  const { dispatch } = this.props;
  const { email, password } = this.state;
  dispatch(loginUser(email, password));
};

如何按Enter鍵提交表單？ 我正在使用標准的 Material UI Button組件。

Answer 1

通過制作"submit"類型的按鈕來嘗試以下操作。 這應該可以使用 enter 鍵啟用表單提交：

<Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
  Sign In
</Button>

同樣使用"submit"類型，您不需要onClick ，因為默認情況下單擊提交按鈕會觸發表單submit事件。

Answer 2

對於按鈕 Ex，您必須使用type="submit" ：

    <Button 
        type="submit" 
        fullWidth 
        variant="contained"
        color="primary"
        className={classes.submit}
    >
        Sign In
    </Button>

Answer 3

在Button中添加type=submit對我不起作用。 您可以在此處嘗試使用此解決方案。 它使用了一個在 React 中工作的UseEffect鈎子。

Answer 4

使用捕鼠器
https://www.npmjs.com/package/mousetrap
https://www.npmjs.com/package/@types/mousetrap
（是的，我知道，不幸的是，當您使用 typescript 時，您必須安裝基本模塊以外的類型）

import {bind} from 'mousetrap';

const handleSubmit = async () => {
// submit func here
};

bind(['enter', 'return'], handleSubmit);

使用捕鼠器的其他示例，可能用於其他目的：

bind(['command+k', 'ctrl+k'], function(e) {
    highlight([11, 12, 13, 14]);
    return false;
});