React 表单与事件

在 React 中，表单和事件处理是非常重要的部分，因为它们允许用户与应用程序进行交互。本章将介绍如何在 React 中处理表单和事件。

表单

在 React 中，表单元素的工作方式与普通的 HTML 表单元素相似，但有一些区别。首先，React 使用一种称为“受控组件”的方式来处理表单数据。这意味着表单元素的值由 React 组件的状态控制。

// www.javascriptcn.com code example
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

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

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

在上面的示例中，我们创建了一个简单的表单组件 MyForm，它包含一个文本输入框和一个提交按钮。文本输入框的值由组件的状态 value 控制，当输入框的值发生变化时，会触发 handleChange 方法更新状态的值。

事件处理

在 React 中处理事件与处理普通的 HTML 事件类似，只是语法略有不同。在 React 中，事件处理程序是作为组件的方法来定义的，并且需要使用箭头函数或者在构造函数中绑定 this。

// www.javascriptcn.com code example
class MyButton extends React.Component {
  handleClick = () => {
    alert('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

在上面的示例中，我们创建了一个简单的按钮组件 MyButton，当按钮被点击时，会触发 handleClick 方法弹出一个提示框。

总结

在本章中，我们学习了如何在 React 中处理表单和事件。通过受控组件的方式处理表单数据，以及定义事件处理程序来实现用户与应用程序的交互。在下一章中，我们将继续探讨 React 的其他功能。