Кнопка React не может вызвать метод в компоненте Function

Question

У меня есть кнопка React, которая является формой, и я собираюсь отправить форму, когда нажимаю на кнопку. К сожалению, когда я нажимаю на кнопку, ничего не происходит, и страница только перезагружается. Даже когда я просто пытаюсь вывести на консоль, ничего не происходит, но когда вы проверяете сеть, вы можете видеть, что выполняется действие.

Ниже приведен мой код, который представляет собой простую форму входа и функциональность, которая проверяет пользователя вход. Мне нужна кнопка для вызова функции handleSubmit при нажатии на кнопку.

export default function Signin() {
const classes = useStyles();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [usernameError, setUsernameError] = useState('');
const [passwordError, setPasswordError] = useState('');

const validateUsername = () => {
setUsernameError(username.length > 3 ? null : 'Username must be longer than 3 characters')
}

const validatePassword = () => {
setPasswordError(password.length > 7 ? null : 'Password must be longer than 8 characters')
}

const handleSubmit = () => {
//const { history } = this.props;

console.log('testing button')
}

return (
<Grid
  className={classes.root}
  component="main"
  container
>
  <CssBaseline />
  <Grid
    className={classes.image}
    item
    md={4}
    sm={7}
    xs={false}
  />
  <Grid
    component={Paper}
    elevation={6}
    item
    md={8}
    sm={5}
    square
    xs={12}
  >
    <MuiThemeProvider theme={theme}>
      <div className={classes.paper}>
        <img
          alt="logo"
          src={process.env.PUBLIC_URL + '/images/....'}
        />
        <Typography
          component="h1"
          style={{ color: '#E60000' }}
          variant="h5"
        >
          Sign In
        </Typography>
        <form
          className={classes.form}
          noValidate
        >
          <Grid
            container
            spacing={2}
          >
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={6}
            >
              <TextField
                autoComplete="username"
                className={`form-control ${usernameError ? 'is-invalid' : ''}`}
                fullWidth
                id="username"
                label="Enter Username"
                margin="normal"
                name="username"
                onBlur={validateUsername}
                onChange={e => setUsername(e.target.value)}
                required
                value={username}
                variant="outlined"
              />
              <div className={classes.invalidFeedback}>{usernameError}</div>
            </Grid>
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={6}
            >
              <TextField
                autoComplete="current-password"
                className={`form-control ${passwordError ? 'is-invalid' : ''}`}
                fullWidth
                id="password"
                label="Password"
                margin="normal"
                name="password"
                onBlur={validatePassword}
                onChange={e => setPassword(e.target.value)}
                required
                type="password"
                value={password}
                variant="outlined"
              />
              <div className={classes.invalidFeedback}>{passwordError}</div>
            </Grid>
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={3}
            >
              <Button
                className={classes.submit}
                color="primary"
                fullWidth
                onClick={handleSubmit}
                type="submit"
                variant="contained"
              >
                Sign In
              </Button>
              <Grid
                item
                xs={3}
              />
            </Grid>
          </Grid>

          <Grid container>
            <Grid
              item
              xs={3}
            />
            <Grid
              item
              xs={3}
            >
              <Link
                className={classes.link}
                to={`${process.env.PUBLIC_URL}/passwordreset`}
                variant="body2"
              >
                <Button
                  className={classes.submit}
                  color="primary"
                  fullWidth
                  type="submit"
                  variant="text"
                >
                  Forgot Password
                </Button>
              </Link>
            </Grid>
            <Grid item>
              <Link
                className={classes.link}
                to={`${process.env.PUBLIC_URL}/signup`}
                variant="body2"
              >
                <Button
                  className={classes.submit}
                  color="primary"
                  fullWidth
                  type="submit"
                  variant="text"
                >
                  New User?
                </Button>
              </Link>
            </Grid>
          </Grid>
          <Box mt={5}>
            <SigninTrouble />
          </Box>
        </form>
      </div>
    </MuiThemeProvider>
  </Grid>
</Grid>
);
}

Answer 1

Поскольку вы используете форму, вам нужно обрабатывать метод отправки в форме вместо вашей кнопки. Поскольку ваш тип кнопки - submit, который запускает событие onSubmit в форме.

<form onSubmit={handleSubmit}>
  <button type="submit"></button> 
</form>

Если вы хотите сделать асин c вызов, вам нужно остановить нормальный цикл событий для вашей формы.

const handleSubmit = (event) => {
  // stop redirect
  event.preventDefault();
  console.log('testing button');
  // here you can make your async call
}

Answer 2

Вот очень простой пример:

import React, {useEffect, useState} from 'react';

function Example(props) {

    function clickHandler() {
        alert('hi');
    }
    return (
        <div>
            <button onClick={clickHandler}>Click here</button>
        </div>
    );
}
export default Example;

Answer 3

Чтобы использовать кнопку с типом submit, она должна быть вложена в тег формы html и обрабатывать отправку с помощью атрибута onsubmit. Другим вариантом является атака на обработчик события onClick для вашей кнопки и получение лога отправки c.