React + JavaScript Как создать объект в React со всеми заданными полями

Question

У меня есть следующая страница регистрации, и я каждый раз консолью журнал в функции, называемой «подписать», после нажатия кнопки «Зарегистрироваться». Хотя каждое поле индивидуально отображается в консоли, мне нужно сделать так, чтобы они отображались как один объект. Любая помощь приветствуется, вот мой код для функции реакции SignUp:

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>

Answer 1

Вы можете использовать useReducer для создания объекта состояния вашего компонента следующим образом:

import React, { useReducer } from 'react'

const initialState = {
	firstName: '',
	email: '',
	password: '',
}

const reducer = (state = initialState, action) => {
	switch (action.type) {
		case 'SET_FIRSTNAME':
			return { ...state, firstName: action.payload }
		case 'SET_EMAIL':
			return { ...state, email: action.payload }
		case 'SET_PASSWORD':
			return { ...state, password: action.payload }
		default:
			return state
	}
}

export default function SignUp() {
  const [state, dispatch] = useReducer(reducer, initialState)
  let sign = (event) => {
    event.preventDefault();
    console.log(state); 
  };

  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) => dispatch({ type: 'SET_FIRSTNAME', payload: event.target.value })}
              />
            </Grid>

            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                onChange={(event) => dispatch({ type: 'SET_EMAIL', payload: 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) => dispatch({ type: 'SET_PASSWORD', payload: event.target.value })}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={sign}
          >
            Sign Up
          </Button>

Answer 2

Можно сделать примерно так:

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