react 提交from 表单

在 React 中提交表单的方式与原生 HTML 中有所不同。以下是一个基本的示例：

首先在 React 组件的状态中添加表单输入的值：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      message: ''
    };
  }

  // 处理表单输入
  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  // 处理表单提交
  handleSubmit = (event) => {
    event.preventDefault(); // 防止默认提交行为
    console.log(this.state); // 打印表单输入的值
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <label>
          Message:
          <textarea name="message" value={this.state.message} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

在上面的例子中，我们创建了一个名为 `MyForm` 的 React 组件，并在状态中添加了三个输入值：`name`、`email` 和 `message`。我们还定义了两个方法来处理表单输入和提交，分别是 `handleChange` 和 `handleSubmit`。

在 `handleChange` 方法中，我们使用 `event.target` 来获取输入的值，并使用 `setState` 方法将其保存到组件的状态中。

在 `handleSubmit` 方法中，我们使用 `event.preventDefault()` 防止默认的表单提交行为。然后我们打印出组件的状态，以便查看表单输入的值。

最后，我们在表单元素上使用 `onSubmit` 属性来执行 `handleSubmit` 方法。这将会在用户点击提交按钮时触发。

希望这个例子能帮助你理解如何在 React 中提交表单。