Отправьте форму, используя клавишу Enter с "@ material-ui / core / Button" в реакции.js - PullRequest
Новая
       26

Отправьте форму, используя клавишу Enter с "@ material-ui / core / Button" в реакции.js

0 голосов
/ 04 ноября 2019

Вот моя форма в методе рендеринга, предназначенная для входа в систему пользователя. 

<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));
  };

Отправка работает при нажатии кнопки, но нене работает на клавишу ввода. Обратите внимание, что я использую кнопку от import Button from "@material-ui/core/Button";

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Попробуйте следующее, сделав вместо этого кнопку типа "submit". Это должно разрешить отправку формы с помощью клавиши ввода: 

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

Также с типом "submit" вам не нужно onClick, потому что нажатие кнопки отправки запускает событие формы submit по умолчанию.

Надеюсь, это поможет!

0 голосов
/ 04 ноября 2019

Вы должны использовать type="submit" как для кнопки Пример: 

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