如何在React中實現表單的動態增減字段

在React中實現表單的動態增減字段可以通過以下步驟實現：

1. 創建一個表單組件，包含一個狀態來存儲表單字段的值。
2. 在表單組件中添加一個按鈕，用于動態增加字段。
3. 在按鈕的點擊事件處理函數中，使用setState方法更新狀態，將新的字段值添加到狀態中。
4. 在表單中渲染狀態中存儲的字段值，可以使用map方法來動態渲染多個字段。
5. 可以為每個字段添加一個刪除按鈕，用于動態刪除對應的字段。
6. 在刪除按鈕的點擊事件處理函數中，使用setState方法更新狀態，將對應的字段值從狀態中刪除。

以下是一個簡單的示例代碼，演示了如何在React中實現表單的動態增減字段：

import React, { useState } from 'react';

const DynamicForm = () => {
  const [fields, setFields] = useState(['']);

  const addField = () => {
    setFields([...fields, '']);
  };

  const removeField = (index) => {
    const newFields = [...fields];
    newFields.splice(index, 1);
    setFields(newFields);
  };

  const handleChange = (index, e) => {
    const newFields = [...fields];
    newFields[index] = e.target.value;
    setFields(newFields);
  };

  return (
    <form>
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field}
            onChange={(e) => handleChange(index, e)}
          />
          <button type="button" onClick={() => removeField(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={addField}>
        Add Field
      </button>
    </form>
  );
};

export default DynamicForm;

在上面的示例中，我們使用useState鉤子來創建一個存儲字段值的狀態fields，并在addField函數中動態增加字段，在removeField函數中動態刪除字段。在handleChange函數中，我們更新對應字段的值。然后我們使用map方法來渲染動態增減的字段，為每個字段添加了一個刪除按鈕。