React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）

import React, { Component } from 'react';
 
class ControlledForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
 
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
 
  handleSubmit(event) {
    alert('提交的数据为: ' + this.state.value);
    event.preventDefault();
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          输入:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
 
export default ControlledForm;

这段代码展示了如何创建一个受控组件来处理表单输入。组件的状态包含了输入字段的当前值，并且在每次输入值改变时更新状态。这确保了表单数据的准确性和一致性，并且使得表单提交时可以获取到最新的数据。