使用复选框在 ReactJS 中保存表单值

我使用反应钩子表单创建了一个表单组件。该组件由一组复选框和一个文本输入组成。当用户单击最后一个复选框时出现文本输入custom。这个的想法是：当用户单击时，会出现一个文本输入，并且用户可以添加自定义答案/选项。例如：如果用户输入test在输入中，然后当用户保存表单时，应该出现在数组中test值，但是custom文本不应该在数组中。在我的应用程序中我无权访问const onSubmit = (data) => console.log(data, "submit");，所以我需要更改其中的值Component成分。现在，当我点击提交时，我进入了最终的数组custom value.
问题：如何解决上述问题？

const ITEMS = [
  { id: "one", value: 1 },
  { id: "two", value: 2 },
  { id: "Custom Value", value: "custom" }
];

export default function App() {
  const name = "group";
  const methods = useForm();
  const onSubmit = (data) => console.log(data, "submit");

  return (
    <div className="App">
      <FormProvider {...methods}>
        <form onSubmit={methods.handleSubmit(onSubmit)}>
          <Component ITEMS={ITEMS} name={name} />
          <input type="submit" />
        </form>
      </FormProvider>
    </div>
  );
}

export const Component = ({ name, ITEMS }) => {
  const { control, getValues } = useFormContext();
  const [state, setState] = useState(false);

  const handleCheck = (val) => {
    const { [name]: ids } = getValues();

    const response = ids?.includes(val)
      ? ids?.filter((id) => id !== val)
      : [...(ids ?? []), val];

    return response;
  };

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, formState }) => {
        return (
          <>
            {ITEMS.map((item, index) => {
              return (
                <>
                  <label>
                    {item.id}
                    <input
                      type="checkbox"
                      name={`${name}[${index}]`}
                      onChange={(e) => {
                        field.onChange(handleCheck(e.target.value));
                        if (index === ITEMS.length - 1) {
                          setState(e.target.checked);
                        }
                      }}
                      value={item.value}
                    />
                  </label>
                  {state && index === ITEMS.length - 1 && (
                    <input
                      {...control.register(`${name}[${index}]`)}
                      type="text"
                    />
                  )}
                </>
              );
            })}
          </>
        );
      }}
    />
  );
};

demo: https://codesandbox.io/s/winter-brook-sml0ww?file=/src/Component.js:151-1600

假设目标是使所有选择保持相同group字段，它必须是一个按提供的顺序记录所选值的数组，如果指定，则将自定义输入值作为最后一项，也许理想情况下，计算中的值会更容易onSubmit提交之前。

但由于偏好不添加逻辑onSubmit，也许另一种选择是托管本地状态，在状态发生变化时运行所需的计算，然后调用setValue手动将计算值同步到group field.

经过修改的分叉演示：代码沙箱

import "./styles.css";
import { Controller, useFormContext } from "react-hook-form";
import React, { useState, useEffect } from "react";

export const Component = ({ name, ITEMS }) => {
  const { control, setValue } = useFormContext();
  const [state, setState] = useState({});

  useEffect(() => {
    const { custom, ...items } = state;
    const newItems = Object.entries(items).filter((item) => !!item[1]);
    newItems.sort((a, b) => a[0] - b[0]);
    const newValues = newItems.map((item) => item[1]);
    if (custom) {
      setValue(name, [...newValues, custom]);
      return;
    }
    setValue(name, [...newValues]);
  }, [name, state, setValue]);

  const handleCheck = (val, idx) => {
    setState((prev) =>
      prev[idx] ? { ...prev, [idx]: null } : { ...prev, [idx]: val }
    );
  };

  const handleCheckCustom = (checked) =>
    setState((prev) =>
      checked ? { ...prev, custom: "" } : { ...prev, custom: null }
    );

  const handleInputChange = (e) => {
    setState((prev) => ({ ...prev, custom: e.target.value }));
  };

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, formState }) => {
        return (
          <>
            {ITEMS.map((item, index) => {
              const isCustomField = index === ITEMS.length - 1;
              return (
                <React.Fragment key={index}>
                  <label>
                    {item.id}
                    <input
                      type="checkbox"
                      name={name}
                      onChange={(e) =>
                        isCustomField
                          ? handleCheckCustom(e.target.checked)
                          : handleCheck(e.target.value, index)
                      }
                      value={item.value}
                    />
                  </label>
                  {typeof state["custom"] === "string" && isCustomField && (
                    <input onChange={handleInputChange} type="text" />
                  )}
                </React.Fragment>
              );
            })}
          </>
        );
      }}
    />
  );
};