如何在React中使用動態(tài)表單元素和數(shù)組

在React中使用動態(tài)表單元素和數(shù)組可以通過以下步驟實現(xiàn)：

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

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函數(shù)遍歷存儲在state中的數(shù)組，為每個表單元素添加事件處理函數(shù)和刪除按鈕。

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