React问题：设置state后输入框无法编辑如何解决？

你的代码里有两个关键错误导致输入框无法编辑：

1. 输入框未设置name属性
   你的handleChange函数依赖event.target.name来确定要更新状态中的哪个字段，但两个输入框都没加name属性，状态无法正确对应更新。

2. JSX属性绑定写法错误
   你给value、onChange、onClick加了双引号包裹花括号（比如value="{teacherLoginData.email}"），这会把这些值当成字符串处理，而不是绑定对应的状态或函数，导致输入框和状态完全脱节。

修正后的完整代码 #

import { useState } from 'react';

const LoginForm = () => {
    const [teacherLoginData, setTeacherLoginData] = useState({
        email: '',
        password: '',
    });

    const handleChange = (event) => {
        setTeacherLoginData({
            ...teacherLoginData,
            [event.target.name]: event.target.value
        });
    };

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

    return (
        <div>
            <input 
                value={teacherLoginData.email} 
                onChange={handleChange} 
                type="text" 
                name="email" 
                className="form-control" 
            />
            <input 
                value={teacherLoginData.password} 
                onChange={handleChange} 
                type="password" 
                name="password" 
                className="form-control" 
            />
            <button onClick={submitForm} className="btn btn-primary">Login</button>
        </div>
    );
};

export default LoginForm;

关键修改说明 #

• 给两个输入框分别添加name="email"和name="password"，让handleChange能正确识别要更新的状态字段。
• 去掉value、onChange、onClick属性外层的双引号，直接用{}绑定对应的状态和函数，确保输入框值和状态实时联动。

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