如何修复React Hook Form自定义复选框提交值异常问题

我明白你的问题了——当用户勾选"Custom Value"复选框并输入自定义内容后，提交表单时数组里还是保留了"custom"这个占位值，而不是用户输入的实际内容，而且你不能修改外部的onSubmit函数，只能调整Component内部逻辑。

下面是修改后的Component代码，我会一步步解释关键调整点：

import { useFormContext, Controller } from "react-hook-form";
import { useState, useEffect } from "react";

export const Component = ({ name, ITEMS }) => {
  const { control, getValues, setValue } = useFormContext();
  const [showCustomInput, setShowCustomInput] = useState(false);
  const [customInputValue, setCustomInputValue] = useState("");

  // 当自定义输入框内容变化时，同步更新表单数组里的自定义项
  useEffect(() => {
    if (showCustomInput) {
      const currentValues = getValues(name) || [];
      // 找到数组里的"custom"占位符，替换成当前输入值
      const updatedValues = currentValues.map(val => 
        val === "custom" ? customInputValue : val
      );
      setValue(name, updatedValues);
    }
  }, [customInputValue, showCustomInput, getValues, setValue, name]);

  const handleCheckboxChange = (itemValue, isChecked) => {
    const currentValues = getValues(name) || [];
    let updatedValues;

    if (itemValue === "custom") {
      // 处理自定义选项的勾选/取消
      setShowCustomInput(isChecked);
      if (isChecked) {
        // 勾选时，把自定义输入值（默认空）加入数组
        updatedValues = [...currentValues, customInputValue || ""];
      } else {
        // 取消时，移除数组里的自定义相关值
        updatedValues = currentValues.filter(val => val !== "custom" && val !== customInputValue);
      }
    } else {
      // 处理普通选项的勾选/取消
      updatedValues = isChecked 
        ? [...currentValues, itemValue] 
        : currentValues.filter(val => val !== itemValue);
    }

    setValue(name, updatedValues);
  };

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={[]}
      render={({ field }) => {
        return (
          <>
            {ITEMS.map((item, index) => {
              const isCustomItem = index === ITEMS.length - 1;
              // 判断当前选项是否被勾选（普通项看是否在数组里，自定义项看showCustomInput）
              const isChecked = isCustomItem 
                ? showCustomInput 
                : field.value?.includes(item.value);

              return (
                <div key={item.id}>
                  <label>
                    {item.id}
                    <input
                      type="checkbox"
                      checked={isChecked}
                      onChange={(e) => handleCheckboxChange(item.value, e.target.checked)}
                      value={item.value}
                    />
                  </label>
                  {/* 只在自定义项被勾选时显示输入框 */}
                  {isCustomItem && showCustomInput && (
                    <input
                      type="text"
                      value={customInputValue}
                      onChange={(e) => setCustomInputValue(e.target.value)}
                      placeholder="输入自定义值"
                    />
                  )}
                </div>
              );
            })}
          </>
        );
      }}
    />
  );
};

关键调整说明： #

1. 新增状态管理：

   • showCustomInput：精准控制自定义输入框的显示/隐藏状态
   • customInputValue：单独存储用户在自定义输入框中输入的内容，方便后续同步到表单数组

2. 实时同步输入值到表单：

   • 通过useEffect监听输入框内容变化，当自定义输入框处于显示状态时，自动把表单数组里的"custom"占位符替换成用户输入的实际内容，确保表单值和输入内容一致

3. 重构复选框变更逻辑：

   • 把普通选项和自定义选项的处理逻辑拆分，避免混淆：
     • 普通选项：保持常规的添加/移除对应值的逻辑
     • 自定义选项：勾选时显示输入框并将当前输入值加入数组；取消时移除数组里所有和自定义相关的值
   • 手动绑定复选框的checked状态，确保复选框的显示和表单内部值完全同步

4. 移除冲突的字段绑定：

   • 原代码中给复选框设置的${name}[${index}]属性会和Controller控制的数组字段冲突，直接移除后完全通过setValue来统一更新表单数组，避免了字段混乱

这样修改后，当用户勾选"Custom Value"并输入内容，提交表单时数组里会显示用户输入的自定义内容，而非"custom"占位符，且完全不需要修改外部的onSubmit函数。

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