javascript - 使用 React State 和 UseEffect 控制输入字段焦点

Question

我有一个非常基本的形式，我试图使用 state 和 useEffect 来控制输入元素的焦点和模糊。通过鼠标选择和取消选择输入效果很好，但我还有一个按钮可以打开/关闭焦点，但该按钮无法正常工作。当您按下按钮时，由于某种原因，焦点永远不会关闭。

我一定是在这里遗漏了一些简单的东西，但这让我发疯了。这是下面的代码，以及一个 link to a working codepen .

const Focus = () => {
  const [focused, setFocused] = useState(true)
  const inputRef = useRef()

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

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        onBlur={() => setFocused(false)}
        onFocus={() => setFocused(true)}
      />
      <button onClick={() => setFocused(!focused)}>Toggle Focus</button>
    </div>
  )
}

Answer 1

注释掉 onBlurHandler 解决了这个问题

 // onBlur={() => setFocused(false)}

当您调用 setFocused(!focused) 时，会触发 useEffect，这又会触发 onBlur 并不必要地再次尝试调用 setFocus。这会创建某种无限循环。因此，只需从输入中删除不必要的 onBlur，因为它没有任何作用

const Focus = () => {
  const [focused, setFocused] = React.useState(true);
  const inputRef = React.useRef();


  React.useEffect(() => {
    console.log('current ' , focused)
    if (focused) {
      inputRef.current.focus();
    } else {
      inputRef.current.blur();
    }
  }, [focused]);
  
  const toggleFocus = () => {
    setFocused(prev => !prev)
  }
  
  const unFocus = () => {
    setTimeout(() => {
            if (focused) setFocused(false)
        }, 300);
  }
  
  const focus =() => {
    if(!focused)setFocused(true)
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        onBlur={unFocus}
        onFocus={focus}
      />
      <button onClick={toggleFocus}>Toggle Focus</button>
    </div>
  );
};

ReactDOM.render(<Focus />, document.querySelector('.app'))

下面的代码解决了这个问题。我不确定确切的问题是什么，但很可能是 react 内部处理的竞争条件