Javascript 如何在onBlur发生之前运行onClick？

我有一个棘手的问题：

我有一个文本输入字段和一个带有建议列表的ul标签，当按下这些建议时，应该填充该输入字段

export default function SimpleDemo() {
    const [show, setShow] = useState(false)
    const [text, setText] = useState("")

    const updateText = (new_text) => {
        setText(new_text)
        setShow(false)
    }

    return (
        <>
            <input
                type="text"
                value={text}
                onChange={(e) => { setText(e.target.value) }}
                onClick={() => { setShow(true) }}
                onBlur={() => { setShow(false) }} // because of this my updateText() handler never runs
            />
            {show && (
                <ul>
                    <li onClick={() => { updateText("Some Text") }}>Some Text</li>
                    <li onClick={() => { updateText("Suggestion 2") }}>Suggestion 2</li>
                    <li onClick={() => { updateText("Hello World") }}>Hello World</li>
                </ul>
            )}
        </>
    )
}

导出默认函数SimpleDemo（）{
const[show，setShow]=useState（false）
const[text，setText]=useState（“”）
const updateText=（新文本）=>{
setText（新文本）
设置显示（假）
}
返回(
{setText（e.target.value）}
onClick={（）=>{setShow（true）}
onBlur={（）=>{setShow（false）}}//因此，我的updateText（）处理程序从未运行过
/>
{show&&(

{updateText（“一些文本”）}>一些文本
{updateText（“建议2”）}>建议2
{updateText（“Hello World”）}>Hello World

)}
)
}

在我将

onBlur

处理程序添加到输入字段之前，它一直按预期工作。（因为我不在该领域时不需要给出建议）

当我将onBlur添加到文本输入时，我的li标记onClick处理程序

updateText（）从不运行，因此从不填充我的输入。它们不会运行，因为我的ul标签首先被删除，因此没有可以单击的带有onClick处理程序的li标签元素

到目前为止，我发现的唯一一个漏洞是将onBlur的内容包装在一个具有任意超时时间的setTimeout（）中。但事实证明，它在一个小的超时时间内是不可靠的，而一个高的超时时间使它在前端显得滞后

什么是可靠的解决方案

我正在尝试克隆HTMLdatalist标记的功能性（因为它允许我对其进行样式设置）。
将您的
onClick
处理程序替换为
onMouseDown
。他们在模糊事件之前开火