React开发可复用Combobox组件遇到状态更新失效问题

核心问题原因 #

点击列表项时，input的onBlur事件会先于li的onClick事件触发，直接把showUl设为false，导致列表被瞬间隐藏，handleSelect函数根本没机会执行——这就是为什么只有列表关闭功能正常，其他逻辑都没生效的根源。

另外，你在handleSelect里直接console.log(input)看不到更新，是因为React的setState是异步操作，调用setInput后不会立刻更新input的值。

修复后的完整代码 #

const {useState, useEffect, useRef} = React;

const Combobox = ({title = 'test', array = []}) => {
    const [input, setInput] = useState('')
    const [returnValue, setReturnValue] = useState('')
    const [showUl, setShowUl] = useState(false)
    const containerRef = useRef(null)

    // 点击组件外部关闭下拉列表
    useEffect(() => {
        const handleClickOutside = (e) => {
            if (containerRef.current && !containerRef.current.contains(e.target)) {
                setShowUl(false)
            }
        }
        document.addEventListener('mousedown', handleClickOutside)
        return () => document.removeEventListener('mousedown', handleClickOutside)
    }, [])

    const filteredArray = input
        ? array.filter(item => item.name.toLowerCase().includes(input.toLowerCase()))
        : array

    const handleSelect = (name, id) => {
        setInput(name)
        setReturnValue(id)
        setShowUl(false)
    }

    // 监听状态变化，正确打印更新后的值
    useEffect(() => {
        console.log(`input is now ${input}`)
        console.log(`returnValue is now ${returnValue}`)
    }, [input, returnValue])

    return (
        <div ref={containerRef}>
            <input
                id={`${title}_input`}
                type="text"
                placeholder='choose an option'
                value={input}
                onChange={e => setInput(e.target.value)}
                onFocus={() => setShowUl(true)}
            />
            <input
                id={`${title}_id`}
                type="hidden"
                value={returnValue}
            />
            {showUl && (
                <ul>
                    {filteredArray.map(item => (
                        <li
                            key={item.id}
                            onClick={() => handleSelect(item.name, item.id)}
                        >{item.name}</li>
                    ))}
                </ul>
            )}
        </div>
    )
}

// 示例传入的选项数据
const testOptions = [
    { id: 1, name: 'eins' },
    { id: 2, name: 'zwei' },
    { id: 3, name: 'polizei' },
]

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Combobox title="test" array={testOptions}/>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

关键修改点 #

• 移除了input的onBlur事件，改用点击组件外部关闭列表的逻辑（通过useRef绑定容器，结合全局mousedown事件），彻底避免了点击列表项时提前隐藏列表的问题。
• 将title和array改成组件props，符合可复用组件的设计要求，方便你在Laravel+Inertia项目中传入不同业务数据。
• 添加useEffect监听状态变化，替代原来同步的console.log，正确打印更新后的值。
• 简化了filteredArray的写法，保持逻辑清晰。

验证效果 #

现在点击列表项时：

1. 可见输入框test_input会正常显示选中的item.name
2. 隐藏输入框test_id会正确存储选中的item.id
3. 下拉列表会正常关闭
4. 控制台能实时打印更新后的input和returnValue值

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