在reactJS中触发onClick函数后如何进入初始状态？

import React, { useState } from 'react';

function MyComponent() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    // 执行一些操作
    setIsClicked(true);

    // 然后重置状态
    setTimeout(() => {
      setIsClicked(false);
    }, 1000); // 假设1秒后回到初始状态
  };

  return (
    <button onClick={handleClick}>
      {isClicked ? 'Clicked' : 'Click me'}
    </button>
  );
}

export default MyComponent;

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false,
    };
  }

  handleClick = () => {
    // 执行一些操作
    this.setState({ isClicked: true });

    // 然后重置状态
    setTimeout(() => {
      this.setState({ isClicked: false });
    }, 1000); // 假设1秒后回到初始状态
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isClicked ? 'Clicked' : 'Click me'}
      </button>
    );
  }
}

export default MyComponent;

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef();

  const handleClick = () => {
    // 执行一些操作
    inputRef.current.value = ''; // 重置输入框的值
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Reset Input</button>
    </div>
  );
}

export default MyComponent;

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [isClicked, setIsClicked] = useState(false);

  const resetState = () => {
    setIsClicked(false);
  };

  return (
    <MyContext.Provider value={{ isClicked, resetState }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const { isClicked, resetState } = useContext(MyContext);

  const handleClick = () => {
    // 执行一些操作
    resetState();
  };

  return (
    <button onClick={handleClick}>
      {isClicked ? 'Clicked' : 'Click me'}
    </button>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

export default App;