React中能否在onFocus事件内用useEffect？遇渲染循环及类型错误求助

错误原因分析 #

1. 无限重渲染错误：
   你写的onFocus={setShowSearch(true)}是直接调用了状态更新函数，而非传递回调函数。组件每次渲染时都会执行setShowSearch(true)，状态变化触发新一轮渲染，形成无限循环，最终触发React的重渲染限制错误。

2. 事件回调类型错误：
   尝试用useEffect包裹逻辑时，错误地将useEffect的返回值（或错误表达式）赋值给onFocus，但onFocus要求接收函数类型的回调，因此出现「Expected onFocus listener to be a function」的警告。

修正后的代码实现 #

import { useState } from 'react';

function SearchComponent() {
  const [showSearch, setShowSearch] = useState(false);
  const [inputHover, setInputHover] = useState(false);

  return (
    <div className={`search ${showSearch ? "show-search" : ""} `}>
      <button
        // 修正：传递箭头函数作为onFocus回调，仅在焦点触发时执行
        onFocus={() => setShowSearch(true)}
        onBlur={() => {
          if (!inputHover) {
            setShowSearch(false);
          }
        }}
      >
        搜索按钮
      </button>
      {/* 搜索输入框，补充hover状态监听 */}
      <input
        onMouseEnter={() => setInputHover(true)}
        onMouseLeave={() => setInputHover(false)}
        onBlur={() => {
          // 延迟隐藏，避免焦点在按钮和输入框间切换时频繁闪烁
          setTimeout(() => setShowSearch(false), 100);
          setInputHover(false);
        }}
        placeholder="输入搜索内容"
      />
    </div>
  );
}

关键修正点 #

• 事件回调必须是函数：onFocus、onBlur这类事件属性需传递函数，用() => setShowSearch(true)替代直接执行setShowSearch(true)。
• 完善hover状态逻辑：给输入框添加onMouseEnter和onMouseLeave更新inputHover，确保按钮失焦时，若鼠标仍在输入框上，搜索框不会隐藏。
• 可选优化：输入框onBlur加短暂延迟，避免焦点在按钮和输入框间切换时，搜索框频繁显示/隐藏。

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