Javascript/Rect-关于.focus()行为的问题

Question

我刚刚创建了一个小的搜索栏组件，它在单击图标时显示/消失。它根据输入是否聚焦，使用漂亮的动画隐藏和显示(更改不透明度和宽度(。

以下是完美工作的代码：

const SearchBar = () => {
const inputRef = useRef();
const [isSearchBarOpen, setIsSearchBarOpen] = useState(false);
const handleClick = () => {
if (!isSearchBarOpen) {
setIsSearchBarOpen(true);
inputRef.current.focus();
} else {
inputRef.current.blur();
setIsSearchBarOpen(false);
}
};
return (
<div className="search-container">
<input
type="text"
placeholder="Search content"
className="searchbar-input"
ref={inputRef}
/>
<BiSearch
className="search-icon"
size="2.5rem"
color="#fff"
onClick={handleClick}
/>
</div>
);
};

然而，在建造它的时候，我注意到了一些事情。以下代码不起作用(搜索栏只在按下图标时收缩，但一旦不再按下，输入就会再次聚焦(：

if (inputRef.current.focus()) {
inputRef.current.blur();
} else {
inputRef.current.focus();
}

另一个奇怪的反应是，当我在if语句中插入.focus((时，我注意到发生了完全相同的事情。

if (!inputRef.current.focus()) console.log('I dont know whats happening');

当点击图标时，上面的代码行也会触发输入焦点。

有人能解释一下引擎盖下面发生了什么吗？为什么不管怎样都叫焦点？还有没有比我的代码更好的方法/练习在点击同一按钮时切换焦点？

Answer 1

当您执行以下操作时：

if (inputRef.current.focus())

您仍在对该函数进行调用，该函数会触发它并聚焦输入，if语句需要一个返回true或false的语句，但是您对focus((函数的调用不会返回这样的值，而是返回函数本身。

下面是使用useEffect钩子的另一种方法，如下所示：

useEffect(() => {
if (isSearchBarOpen) {
inputRef.current.focus();
} else {
inputRef.current.blur();
}
}, [isSearchBarOpen])