使用React State和useEffect控制输入框聚焦时切换按钮失效问题

问题根因 #

问题本质是DOM事件触发顺序导致的状态冲突：

• 输入框处于聚焦状态时点击切换按钮，首先会触发输入框的onBlur事件，直接将focused状态设置为false
• 紧接着按钮的onClick事件触发，将focused状态从false反转为true
• 最终useEffect监听到focused变为true，重新让输入框聚焦，所以看起来切换失焦的操作一直不生效

解决方案 #

最简单的修复方式是给按钮添加onMouseDown事件，阻止默认行为，避免点击按钮时主动触发输入框的失焦事件：

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)}
      />
      {/* 新增onMouseDown阻止默认行为即可解决 */}
      <button 
        onMouseDown={(e) => e.preventDefault()}
        onClick={() => setFocused(!focused)}
      >
        Toggle Focus
      </button>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Dan Zuzevich