React 表单与事件

大家好，欢迎来到 React 表单与事件课程。在这一课中，我们将学习如何在 React 中使用表单和事件。

表单

在 HTML 中，表单元素用于收集用户输入。在 React 中，表单元素与其他 DOM 元素有所不同，因为它们会保留一些内部状态。例如， 元素会跟踪其值， 元素会跟踪其选定的选项。

事件

事件是当用户与网页交互时发生的。在 React 中，可以使用事件处理函数来响应事件。事件处理函数是当事件发生时调用的函数。

表单事件

表单元素有很多内置的事件，例如 onChange、onSubmit 和 onClick。这些事件可以用于在用户与表单元素交互时执行代码。

例如，以下代码演示了如何使用 onChange 事件来跟踪输入框的值：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

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

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

父组件和子组件

当父组件和子组件都使用表单时，可以使用事件处理函数来在组件之间传递数据。

例如，以下代码演示了如何在父组件中使用事件处理函数来更新子组件的状态：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'Hello' };
  }

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <ChildComponent value={this.state.value} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.value}
      </div>
    );
  }
}

总结

在这一课中，我们学习了如何在 React 中使用表单和事件。我们学习了如何使用表单元素来收集用户输入，如何使用事件处理函数来响应事件，以及如何在父组件和子组件之间传递数据。