Моя страница входа в React не дает желаемого результата - PullRequest
Новая
       49

Моя страница входа в React не дает желаемого результата

1 голос
/ 04 мая 2020

Я новичок в React и Javascript, и одним из упражнений, которое я выполнял, было создание страницы входа. Когда я даю имя пользователя и пароль, я хочу, чтобы они отображались в консоли следующим образом: 

{username: "username", password: "password"}

Вместо этого я получаю следующий вывод: 

{p:"p", pa:"pa", pas:"pas", pass:"pass",..., password:"password" , u:"u", us:"us", use:"use"..., username:"username" }

Я следую учебники, но я получаю этот результат. Может ли кто-нибудь помочь мне определить мою ошибку? 

import React, {useState} from 'react';
import {Button, TextField} from '@material-ui/core';

export default function Login(){
  const [formState, setFormState] = useState({
      values:{}
    })
  };

  const handleChange = event => {
    event.persist();
    setFormState( formState => ({
      ...formState,
      values:{
        ...formState.values,
        [event.target.value]:event.target.value
      }
    }));   
  };
  
  const handleSubmit = event =>{
    event.preventDefault();
    console.log(formState.values)
  }
  
  return (
    <div>
      <form className="form" onSubmit={handleSubmit}>
        <TextField
          label="Username"
          name="username"
          onChange={handleChange}
          value=formState.values.username
          ></TextField>
        <TextField
          label="Password"
          name="password"
          onChange={handleChange}
          value=formState.values.password
        ></TextField>
        <Button type="submit">Login</Button>
      </form>
    </div>
  );

1 Ответ

1 голос
/ 04 мая 2020

Ваша смена дескриптора использует event.target.value в качестве ключа. Вам нужно использовать имя входа, которое идентифицирует ваше поле ввода. Измените свой handleChange следующим образом - 

  const handleChange = event => {
    event.persist();
    const values = { values: { ...formState.values, [event.target.name]:event.target.value}}; //name as key instead of value
    setFormState(values);   
  };

Я бы порекомендовал структурировать ваше состояние следующим образом - {username: "", password: ""};

...