React + JavaScript: предмет появляется на консоли, но затем исчезает

Question

Я пытаюсь ввести в консоль журнал двух полей на моей странице регистрации. Однако элемент появляется в консоли примерно на секунду, а затем исчезает. Любая помощь приветствуется. Пожалуйста, найдите мой код для регистрации ниже

  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>

Answer 1

Проблема в том, что вы отправляете форму, не отменяя значение по умолчанию (обновление страницы). Убедитесь, что вы передаете свою функцию sign в свойство onSubmit form, а затем убедитесь, что ваш sign соответствует этим строкам:

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