如何在reactjs中添加动态多个文本字段

import React, { Component } from 'react';

class DynamicTextField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      textFields: [''] // 初始时只有一个文本字段
    };
  }

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

  addTextField = () => {
    const { textFields } = this.state;
    textFields.push('');
    this.setState({ textFields });
  }

  removeTextField = (index) => {
    const { textFields } = this.state;
    textFields.splice(index, 1);
    this.setState({ textFields });
  }

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

    return (
      <div>
        {textFields.map((value, index) => (
          <div key={index}>
            <input
              type="text"
              value={value}
              onChange={(event) => this.handleInputChange(index, event)}
            />
            <button onClick={() => this.removeTextField(index)}>删除</button>
          </div>
        ))}
        <button onClick={this.addTextField}>添加文本字段</button>
      </div>
    );
  }
}

export default DynamicTextField;