我刚刚学会了一些东西在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事件。
提前感谢您的帮助!!!
2条答案
按热度按时间cu6pst1q1#
有更简单的方法可以实现这一目标。但更简单的方法是改变:
到
lawou6xi2#
为了使用变量作为对象中的键,你需要用[] Package 它,尝试更改这一行:
致:
除此之外,我认为保存一个
inputs
状态加上一个username
和password
的单独状态有点多余,要么只保存输入,要么保存用户名和密码,然后在提交构建对象时...