React+Flowbite：阻止SelectInput触发表单onBlur事件的方法

问题原因 #

点击Flowbite的SelectInput时，其下拉菜单通常挂载在body而非表单内部，导致焦点离开表单触发onBlur事件，进而执行cancelEdit隐藏表单。

方案一：优化表单onBlur事件判断 #

通过event.relatedTarget判断即将获得焦点的元素是否属于表单内部，仅当焦点完全离开表单时才执行取消逻辑：

{editingLocation && (
  <form
    className="flex-row justify-center mb-4 -mt-2"
    onBlur={(e) => {
      // 仅当即将聚焦的元素不在表单内时，执行取消操作
      if (!e.currentTarget.contains(e.relatedTarget)) {
        cancelEdit();
      }
    }}
  >
    <div className="flex flex-row w-full items-center gap-2 scale-75 justify-center">
      <TextInput
        autoFocus
        className="w-fit"
        id="city"
        placeholder="city"
        shadow
      />
      <SelectInput options={STATES_LIST} />
    </div>
  </form>
)}

注意：如果Flowbite下拉菜单不在表单DOM树中，relatedTarget可能无法识别该元素，此时推荐使用方案二。

方案二：监听外部点击隐藏表单（更可靠） #

通过监听document的点击事件，判断点击区域是否在表单外，这种方式不受下拉菜单挂载位置影响：

1. 给表单添加ref并绑定监听逻辑：

import { useRef, useEffect } from 'react';

// 组件内部定义表单ref
const formRef = useRef(null);

useEffect(() => {
  const handleClickOutside = (e) => {
    // 点击区域不在表单内时，执行取消操作
    if (formRef.current && !formRef.current.contains(e.target)) {
      cancelEdit();
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  // 组件卸载时清理监听，避免内存泄漏
  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, [editingLocation]); // 依赖editingLocation，确保状态切换时重新绑定监听

2. 修改表单代码，绑定ref并移除原onBlur事件：

{editingLocation && (
  <form
    ref={formRef}
    className="flex-row justify-center mb-4 -mt-2"
  >
    <div className="flex flex-row w-full items-center gap-2 scale-75 justify-center">
      <TextInput
        autoFocus
        className="w-fit"
        id="city"
        placeholder="city"
        shadow
      />
      <SelectInput options={STATES_LIST} />
    </div>
  </form>
)}

额外建议 #

• 可以给表单添加一个“取消”按钮，让用户主动触发隐藏，作为外部点击逻辑的补充，提升交互体验。
• 确保cancelEdit函数正确更新editingLocation状态，避免无效渲染或内存泄漏。

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