React中点击状态更新按钮前，如何实现组件背景色1秒切换？

你需要实现点击按钮后先切换背景色并保持1秒，再恢复原背景色并执行后续状态更新的逻辑。当前代码仅设置了临时背景色，缺少延时恢复和后续逻辑的实现，以下是修正方案：

核心修改要点 #

1. 用useRef保存定时器ID，避免多次点击导致的定时器冲突
2. 在点击事件中先设置临时背景色，通过setTimeout延时执行恢复操作和后续状态更新
3. 组件卸载时清理定时器，防止内存泄漏

完整代码示例 #

import { useState, useRef, useEffect } from 'react';
import { TouchableWithoutFeedback, View, Text } from 'react-native';

// 假设styles为已定义的样式对象
const YourComponent = () => {
  const [rightOptionBgColor1, setRightOptionBgColor1] = useState('#95d4ed');
  const [rightAns, setRightAns] = useState('初始答案');
  const timerRef = useRef(null);

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => {
      timerRef.current && clearTimeout(timerRef.current);
    };
  }, []);

  function onPressOptionRight1() {
    // 清除之前的定时器，避免重复触发
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // 设置临时背景色（可根据需求替换为红/蓝）
    setRightOptionBgColor1('green');

    // 1秒后恢复原背景色并执行内容变更逻辑
    timerRef.current = setTimeout(() => {
      setRightOptionBgColor1('#95d4ed');
      // 这里写入你需要执行的状态更新逻辑
      setRightAns('更新后的答案内容');
    }, 1000);
  }

  return (
    <TouchableWithoutFeedback onPress={onPressOptionRight1}>
      <View style={[styles.twoOptions, { backgroundColor: rightOptionBgColor1 }]}>
        <Text style={styles.textStyles}>{rightAns}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default YourComponent;

关键细节说明 #

• 定时器管理：useRef存储的定时器ID在组件生命周期内不会因重渲染重置，能有效避免快速点击时多个定时器同时运行的问题。
• 颜色灵活切换：如果需要根据场景切换红/绿/蓝，只需修改setRightOptionBgColor1的参数即可，比如判断答案对错后设置对应颜色。
• 内存泄漏防护：通过useEffect的清理函数在组件卸载时清除定时器，避免无效定时器占用资源。

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