在React中通过多个表单字段添加数组元素

import React, { useState } from 'react';

const NameForm = () => {
  const [names, setNames] = useState(['']);

  const handleNameChange = (index, value) => {
    const updatedNames = [...names];
    updatedNames[index] = value;
    setNames(updatedNames);
  };

  const addNameField = () => {
    setNames([...names, '']);
  };

  return (
    <div>
      {names.map((name, index) => (
        <input
          key={index}
          type="text"
          value={name}
          onChange={(e) => handleNameChange(index, e.target.value)}
        />
      ))}
      <button onClick={addNameField}>Add Name Field</button>
      <div>
        Added Names:
        {names.map((name, index) => (
          <span key={index}>{name} </span>
        ))}
      </div>
    </div>
  );
};

export default NameForm;