javascript - 在react.js中使用Enter键和 "@material-ui/core/Button"提交表单

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" 类型的按钮来尝试以下操作反而。这应该启用使用回车键提交表单:

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

还有类型 "submit"你不需要onClick ，因为单击提交按钮会触发表单 submit默认事件。