如何在reactjs中单击提交时将表单数据推送到数组中

在ReactJS中，可以通过以下步骤将表单数据推送到数组中：

创建一个React组件，包含一个表单和一个用于显示数组数据的列表。
在组件的状态中定义一个数组，用于存储表单数据。
在表单中的每个输入字段上添加一个onChange事件处理程序，以便在输入字段的值发生变化时更新组件状态中的相应属性。
在表单的提交按钮上添加一个onClick事件处理程序，用于将表单数据推送到数组中。
在事件处理程序中，使用setState方法将表单数据添加到数组中，并清空表单字段的值。
在组件的渲染方法中，使用map函数遍历数组，并将每个数组元素渲染为列表项。

以下是一个示例代码：

import React, { Component } from 'react';

class FormComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: [],
      name: '',
      email: '',
    };
  }

  handleInputChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, email } = this.state;
    const formData = { name, email };
    this.setState((prevState) => ({
      formData: [...prevState.formData, formData],
      name: '',
      email: '',
    }));
  }

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

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" name="name" value={this.state.name} onChange={this.handleInputChange} />
          </label>
          <br />
          <label>
            Email:
            <input type="email" name="email" value={this.state.email} onChange={this.handleInputChange} />
          </label>
          <br />
          <button type="submit">Submit</button>
        </form>
        <ul>
          {formData.map((data, index) => (
            <li key={index}>{data.name} - {data.email}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FormComponent;

在上述示例中，我们创建了一个名为FormComponent的React组件。该组件包含一个表单，其中包含一个文本输入字段和一个电子邮件输入字段，以及一个提交按钮。在表单的提交按钮上添加了一个onClick事件处理程序handleSubmit，该处理程序将表单数据推送到formData数组中。在组件的渲染方法中，我们使用map函数遍历formData数组，并将每个数组元素渲染为列表项。

请注意，上述示例中没有提及任何特定的云计算品牌商或产品。如果您需要与腾讯云相关的产品和链接，可以在适当的位置添加相关信息。