React中使用refs调用focus()无法为显示后的input设置焦点怎么办

根本原因 #

React 中的 setState 是异步执行的，你在调用 setState({active: true}) 后立刻执行 focus() 时，组件还没有完成重渲染，input 元素仍然带有 dnone 类，而设置了 display: none 的元素无法触发焦点行为，所以你的调用不会生效。

解决方案 #

方案1：使用 setState 的回调参数 #

setState 支持传入第二个参数作为回调函数，该函数会在 state 更新完成、组件重渲染结束后执行，此时 input 已经处于显示状态，调用 focus 即可生效。
修改后的 click 方法代码如下：

click = (e) => {
  e.preventDefault();
  this.setState({
    active: true
  }, () => {
    // 重渲染完成后再执行聚焦逻辑
    this.input.current.focus();
  });
}

方案2（迁移到函数组件可参考） #

如果后续使用函数组件编写，可以通过 useEffect 监听 active 状态的变化，触发聚焦逻辑：

import { useState, useRef, useEffect } from 'react';

function App() {
  const inputRef = useRef(null);
  const [active, setActive] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setActive(true);
  }

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

  return (
    <div className="App">
      <input type="text" ref={inputRef} className={active ? "" : "dnone"} />
      <button type="button" onClick={handleClick}>click</button>
    </div>
  )
}

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