React中useState绑定输入框显示[Object, object]问题求助

问题根源 #

你犯了两个关键错误：

• 直接把整个input状态对象绑定到input标签的value属性，React会将对象转为字符串，所以显示[Object, object]。
• 没有实现输入变化的状态更新逻辑，导致输入时状态不会更新，开发者工具里状态看似异常，也无法触发后续功能。

修复步骤 #

1. 绑定对象的具体属性：每个输入框要绑定input对象里对应的字段，比如邮箱框绑input.email，密码框绑input.password。
2. 添加状态更新函数：写一个handleChange函数，通过事件对象获取输入框的name和value，用扩展运算符更新状态，保证不可变性。
3. 处理表单提交：给表单添加onSubmit事件，阻止默认跳转行为，方便后续处理登录逻辑。

修复后的完整代码 #

import { useState } from 'react'
import { Link } from 'react-router-dom'

function Login() {
  const [input, setInput] = useState({
    email: '',
    password: ''
  })

  // 处理输入变化的函数
  const handleChange = (e) => {
    const { name, value } = e.target
    setInput(prev => ({
      ...prev,
      [name]: value
    }))
  }

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault()
    // 这里可以写登录逻辑，比如调用接口
    console.log('登录信息:', input)
  }

  return (
    <>
      <form className="form-group" onSubmit={handleSubmit}>
        <div className="input-group">
          <label htmlFor="email">Email</label>
          <input 
            type="email" 
            id='email' 
            name='email' 
            className="form-input" 
            value={input.email} 
            onChange={handleChange}
          />
        </div>
        <div className="input-group">
          <label htmlFor="password">Password</label>
          <input 
            type="password" 
            id='password' 
            name='password' 
            className="form-input" 
            value={input.password} 
            onChange={handleChange}
          />
        </div>
        <p>Don't have an Account? <Link to="/signup">SignUp</Link> </p>
        <button className='btn' type="submit">LogIn</button>
      </form>
    </>
  )
}

export default Login

额外优化点 #

• 把邮箱输入框的type改成email，浏览器会自动做格式校验。
• 密码框type改成password，输入内容会隐藏，更符合登录场景。
• 初始状态里的空格去掉，改成空字符串''，避免输入框默认显示空格。
• 给Link添加to属性，保证跳转正常。

内容的提问来源于stack exchange，提问作者user17305980