React组件创建与事件绑定

import React, { Component } from 'react';
 
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // 将事件处理函数绑定到当前组件实例
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }
 
  render() {
    return (
      <div>
        <p>点击次数: {this.state.count}</p>
        <button onClick={this.handleClick}>点击我</button>
      </div>
    );
  }
}
 
export default MyComponent;

这段代码展示了如何在React类组件中创建一个简单的状态管理系统，其中包含一个状态变量count和一个按钮，用户每次点击按钮时count就会增加。使用箭头函数来直接在onClick事件上绑定handleClick函数，避免了在构造函数中手动绑定的需求。这是React v16.8+推荐的函数组件状态管理方式。