React自定义搜索选择组件事件执行顺序问题求助

点击列表项时输入框无法填充内容的核心原因是：输入框的onBlur事件触发时机早于<li>的onClick，导致列表在点击事件执行前就被卸载了。以下是几种不用setTimeout的解决方案：

方法一：用mousedown替代onClick #

mousedown事件的触发顺序早于blur，可以确保在输入框失去焦点前完成值的设置：

{inputFocused && (
    <ul>
        <li onMouseDown={() => {
            setSearchTerm(element.name);
            setInputFocused(false); // 手动隐藏列表
        }}>{element.name}</li>
    </ul>
)}

注意：这个方法仅覆盖鼠标点击场景，若需要支持键盘选择（如回车），需额外处理键盘事件逻辑。

方法二：通过relatedTarget判断焦点去向 #

利用blur事件的relatedTarget属性，检查新获得焦点的元素是否属于组件内部，避免误隐藏列表：

<input
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    onBlur={(e) => {
        // 确认新焦点不在组件容器内时，再隐藏列表
        if (!e.currentTarget.parentElement.contains(e.relatedTarget)) {
            setInputFocused(false);
        }
    }}
    onFocus={() => setInputFocused(true)}
/>

同时在列表项的点击事件中手动隐藏列表：

<li onClick={() => {
    setSearchTerm(element.name);
    setInputFocused(false);
}}>{element.name}</li>

这种方法更通用，能同时兼容鼠标和键盘交互场景，只需确保输入框和列表处于同一个父容器下，方便用contains判断元素归属。

方法三：用外层容器管理焦点状态 #

将输入框和列表放在同一个可聚焦的容器内，让容器承担焦点管理的职责：

<div 
    tabIndex="-1" 
    onFocus={() => setInputFocused(true)} 
    onBlur={() => setInputFocused(false)}
    className="search-container"
>
    <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
    />
    {inputFocused && (
        <ul>
            <li onClick={() => {
                setSearchTerm(element.name);
                setInputFocused(false);
            }}>{element.name}</li>
        </ul>
    )}
</div>

设置容器的tabIndex="-1"使其可聚焦但不参与键盘Tab导航，点击列表项时容器不会失去焦点，确保onClick正常执行，之后再手动隐藏列表。

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