如何在React中使用動態表單元素和數組

在React中使用動態表單元素和數組可以通過以下步驟實現：

1. 創建一個包含表單元素的組件，并在該組件的state中定義一個數組來存儲表單元素的值。

import React, { useState } from 'react';

const DynamicForm = () => {
  const [values, setValues] = useState([]);

  const handleChange = (index, event) => {
    const newValues = [...values];
    newValues[index] = event.target.value;
    setValues(newValues);
  };

  const handleAddField = () => {
    setValues([...values, '']);
  };

  const handleRemoveField = index => {
    const newValues = [...values];
    newValues.splice(index, 1);
    setValues(newValues);
  };

  return (
    <div>
      {values.map((value, index) => (
        <div key={index}>
          <input
            type="text"
            value={value}
            onChange={e => handleChange(index, e)}
          />
          <button onClick={() => handleRemoveField(index)}>Remove</button>
        </div>
      ))}
      <button onClick={handleAddField}>Add</button>
    </div>
  );
};

export default DynamicForm;

2. 在渲染組件時，使用map函數遍歷存儲在state中的數組，為每個表單元素添加事件處理函數和刪除按鈕。

3. 在事件處理函數中，根據需要更新數組中的值，并使用setValues函數更新state，從而實現動態添加和刪除表單元素的功能。