如何在react js中动态添加表单域

import React, { Component } from 'react';

class DynamicForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formFields: [''] // 初始表单域数组为空
    };
  }

  handleFieldChange = (index, event) => {
    const { formFields } = this.state;
    formFields[index] = event.target.value;
    this.setState({ formFields });
  }

  addFormField = () => {
    const { formFields } = this.state;
    formFields.push('');
    this.setState({ formFields });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // 在这里处理提交表单的逻辑，可以通过访问this.state.formFields获取表单域的值
  }

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

    return (
      <form onSubmit={this.handleSubmit}>
        {formFields.map((field, index) => (
          <input
            key={index}
            value={field}
            onChange={(event) => this.handleFieldChange(index, event)}
          />
        ))}
        <button type="button" onClick={this.addFormField}>
          添加表单域
        </button>
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default DynamicForm;