React Button 無法調用 Function 組件中的方法

Question

我有一個 React 按鈕，它是一個表單，我打算在單擊按鈕時提交表單。 不幸的是，當我點擊按鈕時，什么也沒有發生，頁面只會重新加載。 即使我只是嘗試將 output 連接到控制台也沒有任何反應，但是當您檢查網絡時，您可能會看到正在執行的操作。

下面是我的代碼，它只是一個簡單的登錄表單和一個驗證用戶輸入的功能。 當我單擊按鈕時，我需要該按鈕來調用 function 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

為了使用提交類型的按鈕，它必須嵌套在 html 表單標簽中，並使用 onsubmit 屬性處理提交。 另一種選擇是攻擊您的按鈕的 onClick 事件處理程序，並在那里有您的提交邏輯。

Answer 2

由於您使用的是表單，因此您需要在表單而不是按鈕中處理提交方法。 因為您的按鈕類型是提交，它會觸發表單中的 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;