React动态字段表单：无固定字段时如何通过Hooks维护表单状态

针对动态传入字段的表单场景，不需要为每个字段单独创建state，用对象结构的单一state统一存储所有字段值就能适配任意数量、任意名称的字段需求，具体实现如下：

核心实现思路 #

• 初始化表单状态时，直接根据传入的fields数组生成键值对结构的初始值，每个字段默认空字符串
• 编写通用的输入变更处理函数，通过输入框的name属性匹配对应字段更新值，不需要为每个字段单独绑定事件
• 监听fields属性的变化，同步更新表单状态，避免字段增删后出现状态残留、新字段无对应值的问题
• 提交时直接读取存储的表单状态对象，即可拿到所有字段的输入值

改造后的完整代码 #

import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { useState, useEffect, ChangeEvent, FormEvent } from "react";
import "./CreateRow.css";

type Props = {
    fields: string[]
}

export default function CreateRow(props: Props) {
    const [creatingRow, setCreatingRow] = useState(false);
    // 统一存储所有表单字段值
    const [formData, setFormData] = useState<Record<string, string>>(() => {
        // 初始化时根据传入的fields生成初始值对象
        return Object.fromEntries(props.fields.map(field => [field, ""]))
    });

    // 监听fields变化，同步更新表单状态
    useEffect(() => {
        setFormData(prev => {
            const newFormData: Record<string, string> = {};
            // 只保留当前fields里存在的字段，新增字段默认空字符串
            props.fields.forEach(field => {
                newFormData[field] = prev[field] ?? "";
            })
            return newFormData;
        })
    }, [props.fields])

    // 通用输入变更处理
    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }))
    }

    function sendData(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();
        // 这里直接拿到所有字段的输入值，可按需调用接口提交
        console.log("提交的表单数据：", formData);
        // 提交后重置表单、关闭创建面板
        setFormData(Object.fromEntries(props.fields.map(field => [field, ""])))
        setCreatingRow(false);
    }

    return (
        <>
        <Button variant="contained"
        onClick={() => setCreatingRow(!creatingRow)}
        className="adauga-button"
        >Adauga</Button>
        {
        creatingRow && (
            <form onSubmit={sendData} className="create-form">
            {
                props.fields.map((field, index) => 
                {
                    return (
                    <TextField
                    key={index}
                    required
                    id={`outlined-${field}`}
                    name={field}
                    label={field} // 修复原代码label写死为"Nume"的问题，直接用字段名作为输入框标签
                    placeholder="Scrie"
                    value={formData[field]} // 绑定对应字段的值
                    onChange={handleInputChange} // 绑定通用变更事件
                    />
                    )
                }
                )
            }
            <Button variant="contained"
            type="submit" // 补充提交按钮类型，否则无法触发表单提交事件
            className="trimite-button"
            >Finalizeaza</Button>
            </form>
        )
        }
        
        </>
    );
}

额外优化点说明 #

• 修复了原代码所有输入框label固定为"Nume"的问题，直接使用传入的字段名作为标签，用户可以清晰区分每个输入框的用途
• 给输入框生成了唯一id，避免同页面多个输入框id重复的 accessibility 问题
• 补充了提交后重置表单、关闭创建面板的逻辑，符合常规表单交互习惯

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