React + JavaScript：项目出现在控制台上，然后消失

Posted 2023-02-02

我正在尝试从我的注册页面控制台记录这两个字段。但是，该项目在控制台中显示大约一秒钟，然后消失。任何帮助表示赞赏。请在下面找到我的注册代码

  export default function SignUp() 
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");

  let sign = () => 
    console.log(firstName);
  ;

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className=classes.paper>
        <Avatar className=classes.avatar>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign up
        </Typography>
        <form className=classes.form noValidate>
          <Grid container spacing=2>
            <Grid item xs=12 sm=6>
              <TextField
                autoComplete="fname"
                name="firstName"
                id="firstName"
                label="First Name"
                autoFocus
                onChange=(event) => setFirstName(event.target.value)
              />
            </Grid>
            <Grid item xs=12 sm=6>
              <TextField
                id="lastName"
                label="Last Name"
                name="lastName"
                autoComplete="lname"
                onChange=(event) => setLastName(event.target.value)
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            className=classes.submit
            onClick=sign
          >
            Sign Up
          </Button>

答案

问题是您在提交表单时没有阻止默认值（刷新页面）。确保将sign函数传递给form的onSubmit属性，然后确保sign符合以下要求：

let sign = (event) => 
    event.preventDefault();
    console.log(firstName);
;