当在带有 onBlur 事件的块之外单击按钮时，如何防止 onBlur 执行？

Question

我有自己的搜索输入。当我在其中输入值时，我会显示与显示的搜索词匹配的项目。我只需要在输入聚焦时显示这些元素，并在模糊时隐藏它们。但问题是：当我单击其中一项的 onClick 时，我需要执行一些操作，但我不希望触发 onBlur 。但是当我点击某个元素时，会触发onBlur，从而导致元素被隐藏，并且不会触发该元素的onClick事件。

我尝试使用 event.stopPropagation() 和 event.nativeEvent.stopImmediatePropagation()，但这没有帮助。由于某种原因，即使组件顺序发生更改，onBlur 也总是首先触发。

<Container className='search-widget'>
            <div className={field-wrapper}>
                <SearchField
                    onFocus={() => {...}}
                    onBlur={() => {
                        console.log('onBlur')
                    }}
                />
                <Button onClick={...}>
                    <img src='/images/Search/search.svg' alt='search' />
                </Button>
            </div>
            <SearchList
                itemOnClick={data => {
                    console.log('onClick')
                }}
            />
        </Container>

当焦点输入时

当单击元素时。 onBlur 被触发，菜单被隐藏

Answer 1

您需要使用

relatedTarget

一种方法可能是使用如下所示的引用：

const searchListWrapper = useRef()


return (
          <Container className='search-widget'>
            <div className={field-wrapper}>
                <SearchField
                    onFocus={() => {...}}
                    onBlur={(e) => {
                        const didClickItem = searchListWrapper.current.contains(e.relatedTarget);

                        if(!didClickItem) {
                           // user clicked something other than an item, do stuff
                        }
                    }}
                />
                <Button onClick={...}>
                    <img src='/images/Search/search.svg' alt='search' />
                </Button>
            </div>
            <div ref={searchListWrapper}>
             <SearchList
                 itemOnClick={data => {
                     console.log('onClick')
                 }}
             />
            </div>
        </Container>
);