如何在 onBlur 發生之前運行 onClick？

Question

我有這個棘手的問題：

我有一個文本輸入字段和一個帶有建議列表的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>
            )}
        </>
    )
}

在我將onBlur處理程序添加到我的輸入字段之前，它會按預期工作。 （因為我不在那個領域時不需要顯示建議）

當我將 onBlur 添加到我的文本輸入時，我的li 標簽onClick handler updateText(); 從不運行，因此從不填充我的輸入。 它們沒有運行，因為我的ul 標記首先被刪除，因此沒有可以單擊的帶有 onClick 處理程序的li 標記元素。

到目前為止，我發現的唯一 hack 是將我的 onBlur 的內容包裝在具有任意超時持續時間的 setTimeout() 中。 但事實證明它在小超時時是不可靠的，而高超時使它在前端看起來很滯后。

有什么可靠的解決方案？

我正在嘗試克隆 HTML 數據列表標簽功能（因為它可以讓我設置樣式）。

Answer 1

用onMouseDown替換您的onClick處理程序。 它們在模糊事件之前觸發。