ReactJS中如何将文本输入值作为元素添加到表单数组中

问题说明 #

使用React Hook Form实现表单时，存在以下问题：

• 勾选复选框（如1和2）并在文本输入框输入“test”后，提交得到的数组为[t,e,s,t]，不符合期望的[1,2,'test']
• 文本输入框无值时，不应向数组中添加空元素

问题根源 #

原代码中直接通过setValue("example", e.target.value)将文本框的值赋值给example字段，导致原本的数组被替换为字符串。React Hook Form会将字符串解析为字符数组，因此出现了[t,e,s,t]的错误结果。同时，复选框的注册方式错误（使用example[${index}]作为字段名），无法正确收集选中值为数组。

解决方案 #

修改步骤 #

1. 统一复选框注册字段：将所有复选框注册到同一个example字段，React Hook Form会自动收集选中的value组成数组
2. 单独管理文本输入框：为文本框单独注册一个字段（如textInput），避免覆盖复选框的数组值
3. 提交时合并数组：在表单提交函数中，将复选框的选中值与非空的文本框值合并为目标数组

修改后的完整代码 #

import { useForm } from "react-hook-form";

function App() {
  const {
    register,
    handleSubmit,
    watch
  } = useForm({
    defaultValues: {
      example: [],
      textInput: ""
    }
  });

  const onSubmit = (data) => {
    // 合并复选框选中值与文本框值（非空则添加）
    const resultArray = [...data.example];
    if (data.textInput.trim()) {
      resultArray.push(data.textInput.trim());
    }
    console.log(resultArray, "submit");
  };

  // 实时监听表单值（可选）
  const checkedValues = watch("example") || [];
  const textValue = watch("textInput");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {[1, 2, 3].map((v) => (
        <input
          key={v}
          type="checkbox"
          value={v}
          {...register("example")}
        />
      ))}

      <input
        {...register("textInput")}
        placeholder="输入文本"
      />

      <input type="submit" />
    </form>
  );
}

export default App;

补充说明 #

若需要实时查看合并后的数组，可使用useMemo实现：

import { useMemo } from "react";

// ...
const mergedArray = useMemo(() => {
  const arr = [...checkedValues];
  if (textValue.trim()) {
    arr.push(textValue.trim());
  }
  return arr;
}, [checkedValues, textValue]);
// ...

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