React组件中Checkbox在onBlur事件触发时状态切换异常

问题根源 #

点击Checkbox时，事件触发顺序导致了冲突：selectorPane的onBlur事件会先于Checkbox的onChange事件执行。当你点击Checkbox，selectorPane失去焦点，onBlur先把selectorPaneVisible设为false；紧接着Checkbox的onChange事件触发，又将selectorPaneVisible设为true，所以视觉上呈现“瞬间取消勾选又重新勾选”的现象——实际handleCheckboxStateChange只触发了一次，但状态被两次修改覆盖了。

解决方案 #

方案1：优化onBlur事件的判断逻辑 #

给Checkbox添加ref，在selectorPane的onBlur事件中，判断失去焦点后焦点是否落在Checkbox上，如果是则不执行隐藏操作：

import { useRef, useState } from 'react';

const YourComponent = () => {
  const [selectorPaneVisible, setSelectorPaneVisible] = useState(false);
  const checkboxRef = useRef(null);

  const handleCheckboxStateChange = () => {
    setSelectorPaneVisible(prev => !prev);
  };

  const handleSelectorPaneBlur = (e) => {
    // 若焦点转移到Checkbox上，不执行隐藏
    if (e.relatedTarget !== checkboxRef.current) {
      setSelectorPaneVisible(false);
    }
  };

  return (
    <div>
      <input
        type="checkbox"
        ref={checkboxRef}
        onChange={handleCheckboxStateChange}
        checked={selectorPaneVisible}
      />
      <div
        className={`selectorPane ${selectorPaneVisible ? 'visible' : ''}`}
        onBlur={handleSelectorPaneBlur}
        tabIndex={0} {/* 确保面板可以获得焦点 */}
      >
        {/* 面板内容 */}
      </div>
    </div>
  );
};

方案2：改用document点击事件监听（更推荐） #

放弃依赖onBlur实现点击外部关闭，转而监听document的点击事件，判断点击区域是否在Checkbox或selectorPane内部，不在则隐藏面板：

import { useRef, useState, useEffect } from 'react';

const YourComponent = () => {
  const [selectorPaneVisible, setSelectorPaneVisible] = useState(false);
  const checkboxRef = useRef(null);
  const selectorPaneRef = useRef(null);

  const handleCheckboxStateChange = () => {
    setSelectorPaneVisible(prev => !prev);
  };

  useEffect(() => {
    const handleClickOutside = (e) => {
      // 点击的不是Checkbox，也不是selectorPane内部元素时，隐藏面板
      const isClickOnCheckbox = e.target === checkboxRef.current;
      const isClickInsidePane = selectorPaneRef.current?.contains(e.target);
      if (!isClickOnCheckbox && !isClickInsidePane) {
        setSelectorPaneVisible(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <input
        type="checkbox"
        ref={checkboxRef}
        onChange={handleCheckboxStateChange}
        checked={selectorPaneVisible}
      />
      <div
        ref={selectorPaneRef}
        className={`selectorPane ${selectorPaneVisible ? 'visible' : ''}`}
      >
        {/* 面板内容 */}
      </div>
    </div>
  );
};

这种方式避免了焦点事件的触发顺序问题，逻辑更清晰，也更适配复杂场景。

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