如何通过单击按钮reactjs创建新的输入字段行

constructor(props) {
  super(props);
  this.state = {
    inputFields: [],
  };
}

render() {
  const { inputFields } = this.state;
  
  return (
    <div>
      {inputFields.map((value, index) => (
        <div key={index}>
          <input type="text" value={value} onChange={(e) => this.handleInputChange(e, index)} />
          <button onClick={() => this.removeInputField(index)}>删除</button>
        </div>
      ))}
      <button onClick={this.addInputField}>添加输入字段行</button>
    </div>
  );
}

// 输入字段值变化时更新state中的对应值
handleInputChange(event, index) {
  const { inputFields } = this.state;
  inputFields[index] = event.target.value;
  this.setState({ inputFields });
}

// 添加输入字段行
addInputField() {
  const { inputFields } = this.state;
  inputFields.push('');
  this.setState({ inputFields });
}

// 删除指定的输入字段行
removeInputField(index) {
  const { inputFields } = this.state;
  inputFields.splice(index, 1);
  this.setState({ inputFields });
}