React表单动态新增输入框如何添加register属性？

你现在用原生DOM创建输入框的方式没法直接绑定register，因为register是react-hook-form提供的、给React元素用的属性生成方法，原生DOM元素不支持这种React props的绑定逻辑。正确的做法是用React的状态来管理动态输入框列表，用声明式的方式渲染输入框，具体步骤如下：

1. 初始化状态管理输入框列表 #

用useState维护一个数组，数组的每一项对应一个输入框的初始值（比如空字符串）：

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

function YourForm() {
  const { register, handleSubmit } = useForm();
  // 初始一个输入框，也可以根据需求设为[]
  const [options, setOptions] = useState([""]);

  // 提交表单时可获取收集到的options数据
  const onSubmit = (data) => {
    console.log(data.options); // 这里会拿到所有输入框的内容数组
  };

2. 修改addOption函数，通过更新状态新增输入框 #

不用操作DOM，直接更新状态数组，同时限制数量不超过6：

const addOption = () => {
  if (options.length < 6) {
    setOptions(prevOptions => [...prevOptions, ""]);
  }
};

3. 声明式渲染所有输入框 #

遍历options数组，给每个输入框分配唯一的name（比如options[0]、options[1]），并绑定register：

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <div id="options">
      {options.map((_, index) => (
        <input
          key={index}
          {...register(`options[${index}]`, { required: true })}
          placeholder={`选项 ${index + 1}`}
          type="text"
        />
      ))}
    </div>
    <button type="button" onClick={addOption}>
      新增选项
    </button>
    <button type="submit">提交</button>
  </form>
);

额外优化：支持删除输入框（可选） #

如果需要删除功能，可以加一个删除按钮，点击时移除对应索引的项：

const removeOption = (index) => {
  setOptions(prevOptions => prevOptions.filter((_, i) => i !== index));
};

然后在渲染输入框的时候加上删除按钮：

{options.map((_, index) => (
  <div key={index}>
    <input
      {...register(`options[${index}]`, { required: true })}
      placeholder={`选项 ${index + 1}`}
      type="text"
    />
    {options.length > 1 && (
      <button type="button" onClick={() => removeOption(index)}>
        删除
      </button>
    )}
  </div>
))}

这样所有动态新增的输入框都会通过register正确收集数据，提交表单时就能拿到完整的options数组了。

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