React员工管理系统新增员工页表单输入框无法输入内容如何解决

核心问题原因 #

• 事件回调的属性解构错误：你在handleInputChange方法中错误将e.target的name属性写为firstName，永远无法获取到输入框对应的字段名，导致state不能正确更新，输入框值被固定为初始值，所以无法输入内容。
• 未定义handleSubmit方法，点击保存按钮会触发表单默认提交行为，导致页面刷新。
• addEmployee是异步方法，未加await处理异步逻辑。

修复后完整代码 #

import { useState } from 'react';
// 自行导入你的EmployeeService依赖

// 补充定义initialState，确保字段初始值为空字符串
const initialState = {
  firstName: '',
  lastName: '',
  emailId: ''
}

const AddEmployee=()=>{
    const [state, setState]=useState(initialState);
    const{firstName,lastName,emailId}= state;
    const addEmployee = async(data)=>{
        await EmployeeService.createEmployee(data);
        // 可补充提交成功后逻辑，比如跳转页面、清空表单等
    };
    const handleInputChange = (e) =>{
        // 将firstName改为name，匹配输入框的name属性
        let { name, value  }= e.target;
        setState({ ...state, [name]:value});
    }

    // 补充handleSubmit实现，阻止默认提交行为
    const handleSubmit = (e) => {
        e.preventDefault();
        addEmployee(state);
    }

    return (
        <div>
            <form>
                <label htmlFor="firstName"> First Name: </label>
                <input 
                    type="text" 
                    placeholder="First Name" 
                    name="firstName" 
                    className="form-control" 
                    value={firstName} 
                    onChange={handleInputChange} 
                    required
                />
                {/* lastName、emailId输入框逻辑同上，只要保证name属性和state字段对应即可 */}
                <button className="btn btn-success" onClick={handleSubmit}>Save</button>
            </form>
        </div>
    );
}

export default AddEmployee;

修改完成后输入框即可正常输入内容，表单提交逻辑也可正常运行。

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