reactjs 为什么我没有得到预期的对象输出数据

ipakzgxi  于 2023-03-22  发布在  React
关注(0)|答案(2)|浏览(105)

我刚刚学会了一些东西在React和尝试实践对我自己我有一个小问题.我试图得到一个输入字段的数据都到一个对象.即用户名字段和值与密码字段和值应该是这样的
{username:"bob", password:1234}
但是我得到的结果是这样的
{inputName:1234}
输入名称是保存输入字段的名称属性的变量。
整个代码是这样的。

import './App.css';
import { useState } from 'react';

export default function Login() {
  const [inputs, setInputs] = useState({});

  const [username, setUsername] = useState('');

  const [password, setPassword] = useState('');

  const saveInputData = (e) => {
    let inputName = e.target.name;

    let inputValue = e.target.value;

    inputName == 'username' ? setUsername(inputValue) : setPassword(inputValue);
    setInputs({ ...inputs, inputName: inputValue });
  };

  const submitForm = () => {
    console.log(inputs);
  };

  return (
    <div className='container box'>
      <div className='columns is-mobile df'>
        <div className='column is-full-mobile'>
          <figure className='image is-5by3 box'>
            <img
              className='image'
              src='https://media.istockphoto.com/id/1281819478/vector/corporate-website-website-ui-kit-official-company-website-business-online-representation.jpg?s=612x612&w=0&k=20&c=WM0KmXaluAjyLKXs0Ja7oUaUQYKxmiTS32kq754O-Hg='
            />
          </figure>
        </div>

        <div className='column is-full-mobile'>
          <p className='title is-5 mb-2'>Welcome back!!!</p>

          <p className='mb-5'>To keep connected to us, please login with your credentials.</p>

          <div className='container'>
            <p className='input-label'>Username</p>

            <div className='control has-icons-left has-icons-right'>
              <input
                onChange={saveInputData}
                name='username'
                name='username'
                type='text'
                className='input is-primary is-medium is-outlined'
                placeholder='JohnDoe5635'
              />

              <div className='icon is-left mt-4'>
                <span>
                  <img
                    className='input-icon'
                    src='https://mayortechz.000webhostapp.com/human.png'
                  />
                </span>
              </div>

              <div className='icon is-right mt-4 validator'>
                <span>
                  <img
                    className='input-icon'
                    src='https://mayortechz.000webhostapp.com/checked.png'
                  />
                </span>
              </div>
            </div>
          </div>

          <div className='container'>
            <p className='input-label'>Password</p>

            <div className='control has-icons-left has-icons-right'>
              <input
                onChange={saveInputData}
                name='password'
                type='password'
                className='input is-primary is-medium is-outlined'
                placeholder='Enter Password'
                value={password}
              />

              <div className='icon is-left mt-4'>
                <span>
                  <img
                    className='input-icon'
                    src='https://mayortechz.000webhostapp.com/password.png'
                  />
                </span>
              </div>

              <div className='icon is-right mt-4 validator'>
                <span>
                  <img
                    className='input-icon'
                    src='https://mayortechz.000webhostapp.com/checked.png'
                  />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className='mt-4'>
        <div className='container df'>
          <img className='input-icon' src='https://mayortechz.000webhostapp.com/checked.png' />

          <span className='ml-1'>Remember Me</span>

          <span className='ml-5'>Forgot Password</span>
        </div>
      </div>

      <div className='mt-4'>
        <div className='container df'>
          <span onClick={submitForm} className='button is-primary is-rounded'>
            Login Now
          </span>

          <span className='ml-5 box'>Create Account</span>
        </div>
      </div>
    </div>
  );
}

我试图检查inputName变量的值,并显示它应该与On change事件。
提前感谢您的帮助!!!

cu6pst1q

cu6pst1q1#

有更简单的方法可以实现这一目标。但更简单的方法是改变:

setInputs({ ...inputs, inputName: inputValue });

setInputs({username, password});
lawou6xi

lawou6xi2#

为了使用变量作为对象中的键,你需要用[] Package 它,尝试更改这一行:

setInputs({ ...inputs, inputName: inputValue });

致:

setInputs({ ...inputs, [inputName]: inputValue });

除此之外,我认为保存一个inputs状态加上一个usernamepassword的单独状态有点多余,要么只保存输入,要么保存用户名和密码,然后在提交构建对象时...

相关问题