React Button 无法调用 Function 组件中的方法

Question

I have a React button that is a form and I intend to submit the form when I click on the Button. Unfortunately, when I click on the button, nothing happens and the page only reloads. Even when I just try to output to the console nothing happens but when you check the network, you could see an action being performed.

Below is my code which is just a simple login form and a functionality that validates user input. I need the button to call the function handleSubmit when I click on the button.

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

In order to use a button with type submit it has to be nested within an html form tag and handle the submission with the onsubmit attribute. Onother option is to attack an onClick event handler to your button and have your submission logic there.

Answer 2

Since you are using Form you need to handle submit method in form instead of your button. Because your button type is submit which triggers the onSubmit event in form.

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

If you want to make an async call you need to stop normal event cycle for your form.

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

Answer 3

Here is very simple example:

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;