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

通过单击按钮在React.js中创建新的输入字段行的方法可以通过以下步骤实现：

首先，在React组件的state中添加一个数组，用于存储输入字段的值。例如，可以在构造函数中初始化state：

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

在render方法中，使用map函数遍历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 });
}

以上代码会在页面上渲染一个按钮和一个初始的空输入字段行。单击"添加输入字段行"按钮会在页面上添加一个新的输入字段行，同时每个输入字段行都可以独立编辑和删除。

这种方法适用于需要动态添加或删除输入字段行的表单或其他需要动态增减输入内容的场景。

注意：本回答中没有提及腾讯云相关产品和产品介绍链接地址，因为要求不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。如有需要，可以参考腾讯云官方文档或搜索相关资料获取更多信息。