React表单中混合输入类型（文件与文本）的最佳实践与常见陷阱

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

import React, { useState } from 'react';

const MyJobApplicationForm = () => {
    const [jobForm, setJobForm] = useState({
        name: '',
        lastname: '',
        day: '',
        month: '',
        year: '',
        phone: '',
        email: '',
        jobPosition: '',
        comments: '', // 注意这里是'comments'而不是'coments'，保持一致性
        cv: null // 文件字段初始化为null
    });

    // ... handleChange 函数和 JSX
};

const handleChange = (event) => {
    // 使用解构赋值获取event.target的name, value, 和 files 属性，使代码更简洁
    const { name, value, files } = event.target;

    if (name === "cv") {
        // 对于名为"cv"的文件输入字段
        // 获取files数组的第一个元素，这是一个File对象
        const cvFile = files[0];
        setJobForm((prev) => ({
            ...prev,
            cv: cvFile // 将File对象存储到状态中
        }));
    } else {
        // 对于其他文本、数字等输入字段
        // 直接使用event.target.value更新状态
        setJobForm((prev) => ({
            ...prev,
            [name]: value // 使用计算属性名更新对应字段
        }));
    }
};

const MyJobApplicationForm = () => {
    const [jobForm, setJobForm] = useState({
        // ... state initialization
        cv: null
    });

    const handleChange = (event) => {
        // ... handleChange logic
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log("Form submitted:", jobForm);
        // 在实际应用中，这里会将jobForm.cv（File对象）通过FormData发送到后端
        // 例如：
        // const formData = new FormData();
        // for (const key in jobForm) {
        //     formData.append(key, jobForm[key]);
        // }
        // fetch('/api/upload', { method: 'POST', body: formData });
    };

    return (
        <form onSubmit={handleSubmit}>
            {/* 文本输入字段示例 */}
            <label>
                Name:
                <input
                    type="text"
                    name="name"
                    value={jobForm.name}
                    onChange={handleChange}
                />
            </label>
            <br />
            <label>
                Lastname:
                <input
                    type="text"
                    name="lastname"
                    value={jobForm.lastname}
                    onChange={handleChange}
                />
            </label>
            <br />
            {/* 文件输入字段示例 */}
            <label>
                Upload CV:
                <input
                    type="file"
                    name="cv"
                    onChange={handleChange}
                    // 关键：不要在这里设置 value={jobForm.cv} 或 value={jobForm.cv?.name || ''}
                    // 文件输入的值由浏览器自动管理，我们只通过onChange事件获取其文件对象
                />
            </label>
            {/* 显示已选文件名，提升用户体验 */}
            {jobForm.cv && <p>Selected file: {jobForm.cv.name}</p>}
            <br />
            <button type="submit">Submit Application</button>
        </form>
    );
};

export default MyJobApplicationForm;