使用React Hook Form动态生成并管理表单输入

本文探讨了在react hook form中动态创建并获取具有唯一`register`名称和`id`的表单输入值的有效方法。针对直接字符串拼接访问对象属性的常见误区，文章详细介绍了使用方括号表示法进行动态属性访问的解决方案，并强调了react hook form官方推荐的`usefieldarray`钩子，以更健壮地管理动态表单数组，确保数据获取的准确性和表单逻辑的清晰性。

在构建现代Web应用时，动态表单字段是一个常见的需求，例如允许用户添加多个联系方式、行程日期或商品详情。React Hook Form是一个流行的表单管理库，它提供了强大的功能来简化这一过程。然而，在处理动态生成的输入字段时，尤其是在尝试获取这些字段的值时，开发者可能会遇到一些挑战。

动态表单输入与数据获取的挑战

假设我们需要创建一个表单，允许用户动态添加多个行程日期。每个日期输入框都应具有唯一的id和register名称，通常通过索引值来区分，例如trip_start_date0、trip_start_date1等。

// 动态生成输入字段的示例
{
    Array.from(Array(counter)).map((e, index) => {
        return (
          <div key={index} className="flex flex-col gap-2 lg:flex-row w-full">
            <div className="w-full">
                <label htmlFor={`trip_start_date${index}`} className="block mb-2 text-sm text-slate-500"> Trip Date </label>
                <input
                    type="date"
                    className="w-full px-2 py-2 text-sm text-slate-600 border border-slate-300 focus:border-slate-400 focus:outline-none rounded-lg"
                    id={`trip_start_date${index}`}
                    {...register(`trip_start_date${index}`, {required: false})}
                />
            </div>
          </div>
        )
    })
}
<div className="flex justify-end mt-4 w-full">
   <button type='button' className="text-sm text-blue-500 underline cursor-pointer underline-offset-4 active:text-blue-400" onClick={createDate}>Add new date +</button>
</div>

在上述代码中，我们使用Array.from(Array(counter)).map()来渲染一系列日期输入框，并通过index动态生成id和register名称。当用户提交表单时，handleSubmit函数会接收一个包含所有表单数据的data对象。此时，如果尝试通过data.trip_start_date + i.toString()这种方式来访问data对象中动态生成的字段值，会遇到问题。例如，data.trip_start_date + "0"会尝试获取data.trip_start_date的值（其可能不存在或为undefined），然后将其与字符串"0"拼接，导致结果为undefined0，而非期望的data.trip_start_date0的值。

解决方案一：使用方括号表示法动态访问属性

JavaScript对象允许使用方括号[]来动态访问其属性。这意味着，你可以将属性名作为字符串放入方括号中。因此，要获取data对象中trip_start_date0、trip_start_date1等字段的值，正确的做法是使用方括号表示法来构建完整的属性名字符串。

const registerTrip = (data: any) => {
    const dates = [];
    for (let i = 0; i < counter; i++) {
        // 使用方括号表示法动态访问属性
        const trip_start_date_value = data[`trip_start_date${i}`];
        if (trip_start_date_value) {
            dates.push(trip_start_date_value);
        }
        console.log(`获取到的日期 ${i}:`, trip_start_date_value);
    }
    console.log("所有日期:", dates);
    // 可以在这里处理 dates 数组，例如提交到后端
};

通过data[trip_start_date${i}]，我们能够正确地构造出属性名字符串（如"trip_start_date0"），并用它来从data对象中提取相应的值。

解决方案二：推荐使用 useFieldArray

尽管方括号表示法可以解决动态属性访问的问题，但对于管理动态表单字段列表，React Hook Form提供了更强大、更优雅的解决方案：useFieldArray。

useFieldArray是专门为处理表单数组而设计的钩子，它提供了以下优势：

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

下载

1. 更简洁的API： 提供了fields数组用于渲染，以及append、remove、insert等方法来方便地管理表单项的增删改。
2. 更好的性能： 优化了列表项的渲染和重新渲染。
3. 内置的验证支持： 能够更好地与React Hook Form的验证机制集成。
4. 更清晰的数据结构： handleSubmit接收到的data对象中，动态数组字段会直接以数组形式呈现，而非分散的独立字段。

useFieldArray 的使用示例

首先，在组件中引入并初始化useFieldArray：

import React, { useState } from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

export function RegisterTrips() {
    const { register, handleSubmit, control } = useForm({
        defaultValues: {
            tripDates: [{ date: "" }] // 为 useFieldArray 设置默认值
        }
    });
    const { fields, append, remove } = useFieldArray({
        control,
        name: "tripDates" // 这是你的动态表单字段数组的名称
    });

    const registerTrip = (data: any) => {
        console.log("提交的表单数据:", data);
        // data.tripDates 现在会是一个包含所有日期对象的数组
        // 例如: [{ date: "2023-01-01" }, { date: "2023-01-05" }]
    };

    return (
        <form onSubmit={handleSubmit(registerTrip)}>
            {fields.map((field, index) => (
                <div key={field.id} className="flex flex-col gap-2 lg:flex-row w-full">
                    <div className="w-full">
                        <label htmlFor={`tripDates.${index}.date`} className="block mb-2 text-sm text-slate-500"> Trip Date {index + 1} </label>
                        <input
                            type="date"
                            className="w-full px-2 py-2 text-sm text-slate-600 border border-slate-300 focus:border-slate-400 focus:outline-none rounded-lg"
                            id={`tripDates.${index}.date`}
                            {...register(`tripDates.${index}.date`, {required: true})} // 注意这里的 register 名称
                        />
                        <button type="button" onClick={() => remove(index)}>删除</button>
                    </div>
                </div>
            ))}

            <div className="flex justify-end mt-4 w-full">
                <button
                    type='button'
                    className="text-sm text-blue-500 underline cursor-pointer underline-offset-4 active:text-blue-400"
                    onClick={() => append({ date: "" })} // 添加新的日期字段
                >
                    Add new date +
                </button>
            </div>
            <button type="submit">提交</button>
        </form>
    );
}

在useFieldArray的例子中：

• name: "tripDates"定义了表单数据中数组的键名。
• fields.map()用于渲染每个动态字段，field.id是每个字段的唯一标识，用于key。
• register(tripDates.${index}.date)是关键，它将每个日期输入框注册为tripDates数组中第index个元素的date属性。
• append({ date: "" })用于向数组中添加一个新的空日期对象。
• remove(index)用于删除指定索引的日期字段。

当表单提交时，data对象将包含一个名为tripDates的数组，其中每个元素都是一个包含date属性的对象，例如：{ tripDates: [{ date: "2023-01-01" }, { date: "2023-01-05" }] }。这种结构更符合数据管理的直觉，也更容易进行后续处理。

总结与最佳实践

在React Hook Form中处理动态生成的表单输入时：

1. 动态属性访问： 如果只是偶尔需要通过动态生成的字符串来访问data对象中的属性，使用方括号表示法data[propertyName${index}]是有效的。
2. 管理列表数据： 对于需要频繁添加、删除或重新排序的动态表单字段列表，强烈推荐使用useFieldArray。它提供了更结构化、更健壮的API来管理表单数组的状态和数据流，从而简化了开发并提高了代码的可维护性。

选择正确的工具和方法，可以显著提升开发效率和应用性能。对于动态表单数组，useFieldArray无疑是React Hook Form提供的最佳实践。