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事件处理程序攻击到您的按钮，并使您的提交逻辑在那里。

Answer 2

由于您使用的是Form，因此您需要使用表单而不是按钮来处理Submit方法。因为您的按钮类型为Submit，它会触发表单中的onSubmit事件。

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

如果要进行异步调用，则需要停止表单的正常事件周期。

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

Answer 3

这是一个非常简单的示例：

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;

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

3 个答案: