如何在React上动态添加字段到表单

import React, { Component } from 'react';

class DynamicForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: [], // 字段数组
    };
  }

  handleAddField = () => {
    const { fields } = this.state;
    const newField = {
      name: '',
      value: '',
    };
    this.setState({ fields: [...fields, newField] });
  };

  handleFieldChange = (index, e) => {
    const { fields } = this.state;
    const { name, value } = e.target;
    const updatedFields = [...fields];
    updatedFields[index] = { ...updatedFields[index], [name]: value };
    this.setState({ fields: updatedFields });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交逻辑
  };

  render() {
    const { fields } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        {fields.map((field, index) => (
          <div key={index}>
            <input
              type="text"
              name="name"
              value={field.name}
              onChange={(e) => this.handleFieldChange(index, e)}
            />
            <input
              type="text"
              name="value"
              value={field.value}
              onChange={(e) => this.handleFieldChange(index, e)}
            />
          </div>
        ))}
        <button type="button" onClick={this.handleAddField}>
          添加字段
        </button>
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default DynamicForm;