React イベント処理ガイド: 複雑なフロントエンド インタラクション ロジックを処理する方法

class Example extends React.Component {
  handleClick() {
    console.log('按钮被点击');
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击按钮</button>
    );
  }
}

class Example extends React.Component {
  handleClick(userId) {
    console.log(`用户 ${userId} 被点击`);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this, 123)}>点击按钮</button>
    );
  }
}

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.handleClick.bind(this)}>递增</button>
      </div>
    );
  }
}

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  handleLogin() {
    this.setState({
      isLoggedIn: true
    });
  }

  handleLogout() {
    this.setState({
      isLoggedIn: false
    });
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    return (
      <div>
        {isLoggedIn ? (
          <button onClick={this.handleLogout.bind(this)}>退出登录</button>
        ) : (
          <button onClick={this.handleLogin.bind(this)}>登录</button>
        )}
      </div>
    );
  }
}