React Button无法调用功能组件中的方法

Question

我有一个作为表单的React按钮，当我单击Button时，我打算提交表单。不幸的是，当我单击按钮时，什么也没有发生，并且页面仅重新加载。即使当我只是尝试输出到控制台时，也没有任何反应，但是当您检查网络时，您可能会看到正在执行的操作。

下面是我的代码，它只是一个简单的登录表单，并且具有验证用户输入的功能。当我单击按钮时，需要按钮来调用函数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

为了使用类型为commit的按钮，必须将其嵌套在html表单标记中，并使用onsubmit属性处理提交。Onother选项是将onClick事件处理程序攻击到您的按钮，并使您的提交逻辑在那里。