reactjs - 在material-ui react登录表单中单击提交时未传递数据

问题描述

我已经使用材料 ui 在 reactjs 中创建了一个登录表单，但是当我单击提交按钮时我的数据没有被传递。现在，我尝试从 var body 控制台记录密码和电子邮件，但我没有定义。我想知道我在哪里做错了。甚至 useState 中的电子邮件和密码也没有被突出显示，所以我认为它们很可能没有被使用

const performLogin = async (event, email, password) => {
  event.preventDefault();

  var body = {
    password: password,
    email: email
  };
  console.log(body);
};

export default function Demo() {
  const classes = useStyles();
  const [email, setEmail] = useState("");          //email and password are not highlighted so that means they're not being used anywhere
  const [password, setPassword] = useState("");

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form
          className={classes.form}
          noValidate
          onSubmit={(event, email, password) =>
            performLogin(event, email, password)
          }
        >
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
            onChange={email => setEmail(email)}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            onChange={password => setPassword(password)}
          />

          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
    </Container>

标签： reactjs

您的代码有一些问题：

  onSubmit = {(event, email, password) =>
    performLogin(event, email, password)
  }

这个onSubmit调用在形式上是可以的，但是是多余的：你已经将这个电子邮件和密码存储在一个钩子上，所以你不需要将它传递给performLogin函数，问题是你的 onChange 调用没有更新值：

onChange={email => setEmail(email)}

所以，首先，我们将解决这个onChange函数，它应该是这样的：

 onChange={(event) => setEmail(event.target.value)}

现在挂钩已正确更新，现在您可以在函数内的任何位置调用它们，onSubmit 可以像这样简单：

  onSubmit={performLogin}

然后你可以看到只是调用钩子的值：

  performLogin(event) {
    event.preventDefault();
    alert('A email was submitted: ' + email);
    alert('A pass was submitted: ' + password);
  }

这将对您有所帮助： https ://codesandbox.io/s/stupefied-faraday-kblzo

reactjs - 在material-ui react登录表单中单击提交时未传递数据

问题描述

解决方案

推荐阅读