时间戳

首页 > 解决方案 > 我在 React 中的登录页面没有给出我想要的输出

reactjs - 我在 React 中的登录页面没有给出我想要的输出

问题描述

我是 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>
  );

标签： reactjsauthenticationevent-handling

解决方案

您的手柄更改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: ""};

推荐阅读