react动态添加form表单

在React中，动态添加表单可以通过多种方式实现。以下是一种基本的方法，它使用了React的`useState`钩子来创建一个可以添加和删除表单项的状态变量。

首先，我们创建一个表单项的数据结构。这里假设每个表单项都是一个对象，包含字段名和值。

const FormItem = {
  name: '',
  value: '',
};

接下来，我们创建一个Form组件，它会动态添加表单项。

import React, { useState } from 'react';

function Form() {
  const [formItems, setFormItems] = useState([]);

  const addFormItem = () => {
    setFormItems([...formItems, ...FormItem]); // 添加新的FormItem到现有的表单项数组中
  };

  const removeFormItem = (index) => {
    setFormItems(formItems.filter((_, i) => i !== index)); // 移除指定索引的表单项
  };

  return (
    <div>
      <button onClick={addFormItem}>添加表单项</button>
      {formItems.map((item, index) => (
        <div key={index}>
          <input type="text" value={item.name} />
          <button onClick={() => removeFormItem(index)}>删除</button>
        </div>
      ))}
    </div>
  );
}

在上述代码中，我们创建了一个表单项的状态变量`formItems`，每当用户点击“添加表单项”按钮时，`addFormItem`函数就会被调用，它将创建一个新的`FormItem`对象并将其添加到`formItems`数组中。当用户点击“删除”按钮时，对应的表单项就会被从数组中移除。最后，我们使用`map`函数遍历`formItems`数组，为每个表单项创建一个输入框和一个删除按钮。

这只是一个基本的实现，你可以根据需要对其进行扩展和修改。例如，你可以添加更多的表单项属性，或者使用React的变体来使输入框的值更易于处理。你还可以添加事件处理程序来响应用户的操作，如输入字段的更改或表单的提交等。