时间戳

首页 > 解决方案 > React+JavaScript 如何在 React 中创建具有所有给定字段的对象

javascript - React+JavaScript 如何在 React 中创建具有所有给定字段的对象

问题描述

我有以下注册页面，每次单击注册按钮后，我都会在名为“sign”的函数中进行控制台登录。虽然每个字段在控制台中都是单独可见的，但我需要让它们显示为一个对象。任何帮助表示赞赏，这是我的反应函数注册代码：

export default function SignUp() {
  const [firstName, setFirstName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  let sign = (event) => {
    event.preventDefault();
    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"
                variant="outlined"
                required
                fullWidth
                id="firstName"
                label="First Name"
                autoFocus
                onChange={(event) => setFirstName(event.target.value)}
              />
            </Grid>

            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                onChange={(event) => setEmail(event.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                onChange={(event) => setPassword(event.target.value)}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={sign}
          >
            Sign Up
          </Button>

标签： javascriptreactjsmaterial-ui

解决方案

你可以这样做：

console.log({ firstName , email , password });

推荐阅读