React 表单与事件

React 表单与事件

React 是一个用于构建用户界面的 JavaScript 库，它通过组件化的方式来提高开发效率和代码的可维护性。在 React 应用中，表单和事件处理是核心功能之一，它们允许用户与应用程序进行交互。本文将深入探讨 React 中的表单处理和事件机制，包括如何创建表单、处理用户输入、以及如何通过事件来响应用户的操作。

表单处理基础

在 React 中，表单通常由一系列的表单元素（如输入框、下拉列表、单选按钮等）组成，这些元素允许用户输入数据。React 提供了两种主要的表单处理方法：受控组件和非受控组件。

受控组件

受控组件是指表单数据由 React 组件的状态（state）来管理的组件。在受控组件中，每个表单元素的值都由组件的状态控制，当用户输入数据时，React 会更新组件的状态以反映这些变化。

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

  handleChange = (event) => {
    this.setState({
      name: event.target.value,
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    alert('提交的名字: ' + this.state.name);
  }

  render() {
    return (
      <form onSubmit={this.handleSubm