在React.js中使用Enter键和“ @ material-ui / core / Button”提交表单

这是我在render方法中用于登录用户的表单。

<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键上无效。请注意,我正在使用import Button from "@material-ui/core/Button";

中的Button
li5125110 回答:在React.js中使用Enter键和“ @ material-ui / core / Button”提交表单

请改用"submit"类型的按钮尝试以下操作。这应该使用回车键启用表单提交:

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

也使用"submit"类型,则不需要onClick,因为默认情况下,单击提交按钮会触发submit表单事件。

希望有帮助!

,

您必须使用type="submit"作为按钮 例如:

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

type=submit中添加Button对我不起作用。 您可以尝试使用此解决方案here。它使用了一个UseEffect挂钩,该挂钩可在React中使用。

本文链接:https://www.f2er.com/3164214.html

大家都在问