如何在React中经过指定时间后自动移除元素的className

你只需要在点击触发状态更新后加一个1秒的定时器，将状态重置为false即可，同时要注意补全定时器清理逻辑避免内存泄漏，另外你原始代码里有函数名大小写不匹配的问题需要修正。

完整可运行代码 #

import { useState, useEffect } from 'react';

// 你的样式定义保持不变即可
const btnClicked = {
  bgChange: 'orange-bg-class' // 替换成你实际的类名
};

function DemoComponent() {
  let [Clicked, setState] = useState(false);
  // 存储定时器ID，用于后续清理
  let timeoutId = null;

  const Clicking = () => {
    setState(true);
    // 1秒后重置状态，自动移除className
    timeoutId = setTimeout(() => {
      setState(false);
    }, 1000);
  };

  // 组件卸载时清理未执行的定时器，避免内存泄漏
  useEffect(() => {
    return () => clearTimeout(timeoutId);
  }, []);

  // 注意这里onClick绑定的函数名要和定义的一致，你原代码里的小写clicking是错误的
  return <Button text="dummytext" onClick={Clicking} className={Clicked ? btnClicked.bgChange : ''} />;
}

可选优化 #

如果需要避免用户短时间多次点击导致多个定时器冲突，可以在点击时先清空上一个定时器：

const Clicking = () => {
  // 先清空之前未执行的定时器
  if (timeoutId) clearTimeout(timeoutId);
  setState(true);
  timeoutId = setTimeout(() => {
    setState(false);
  }, 1000);
};

内容的提问来源于stack exchange，提问作者IhateReact