Javascript/React - 关于 .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();
}

其他奇怪的 react ，我注意到当我在 if 语句中插入 .focus() 时会发生完全相同的事情。

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

上面的代码行还会在单击图标时触发输入焦点。

有人可以向我解释一下引擎盖下发生了什么吗？为什么 .focus 无论如何都会被调用？在单击同一个按钮时是否有比我的代码更好的方法/实践来切换焦点？

Answer 1

当你做类似的事情时:

if (inputRef.current.focus())

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

这是使用 useEffect Hook 的另一种方法，如下所示:

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