在React中创建动态onClick函数

import React, { useState } from 'react';

function DynamicClickHandler() {
  const [isToggled, setIsToggled] = useState(false);

  const handleClick = () => {
    setIsToggled(!isToggled);
    if (isToggled) {
      console.log('Button is now OFF');
    } else {
      console.log('Button is now ON');
    }
  };

  return (
    <button onClick={handleClick}>
      {isToggled ? 'Turn OFF' : 'Turn ON'}
    </button>
  );
}

export default DynamicClickHandler;

class DynamicClickHandler extends React.Component {
  state = {
    isToggled: false,
  };

  handleClick = () => {
    this.setState((prevState) => ({
      isToggled: !prevState.isToggled,
    }));
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggled ? 'Turn OFF' : 'Turn ON'}
      </button>
    );
  }
}

class DynamicClickHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggled: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => ({
      isToggled: !prevState.isToggled,
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggled ? 'Turn OFF' : 'Turn ON'}
      </button>
    );
  }
}

import React, { useState, useCallback } from 'react';

function DynamicClickHandler() {
  const [isToggled, setIsToggled] = useState(false);

  const handleClick = useCallback(() => {
    setIsToggled((prevState) => !prevState);
  }, []);

  return (
    <button onClick={handleClick}>
      {isToggled ? 'Turn OFF' : 'Turn ON'}
    </button>
  );
}

export default DynamicClickHandler;