React中setState切换输入框禁用后无法聚焦的优化方案咨询

当然可以！你完全可以利用React setState的回调函数特性来实现这个需求，不用额外编写useEffect。

问题根源 #

你之前直接在onClick里调用focus()无效，是因为React的setState是异步更新状态的。当你调用setEditing(!editing)后，editing状态不会立刻改变，此时输入框依然处于disabled状态，所以聚焦操作不会生效。

解决方案：使用setState的回调函数 #

setState支持第二个参数——一个回调函数，它会在状态更新完成、组件重新渲染并完成DOM更新之后执行。这时候输入框的disabled状态已经同步更新为最新值，调用focus()就会正常生效了。

修改后的代码如下：

import { useState, useRef } from 'react';

const YourComponent = ({ organization }) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <>
      <input
        ref={inputRef}
        disabled={!editing}
        type="text"
        name="name"
        id="name"
        defaultValue={organization?.name}
      />
      <button
        onClick={() => {
          // 使用函数式更新确保获取到最新的prev状态，同时传入回调函数
          setEditing(prevEditing => !prevEditing, () => {
            const inputElement = inputRef.current;
            // 检查输入框是否存在且已解除禁用，再执行聚焦
            if (inputElement && !inputElement.disabled) {
              inputElement.focus();
            }
          });
        }}
        type="button"
      >
        <span>{editing ? "save" : "edit"}</span>
      </button>
    </>
  );
};

为什么这样可行？ #

1. 函数式更新prevEditing => !prevEditing确保我们基于最新的状态值进行切换，避免异步更新导致的状态不一致问题。
2. 回调函数会在状态更新和DOM更新完成后触发，此时输入框的disabled属性已经变成!editing（最新状态），这时候调用focus()就能成功让输入框获得焦点。

这种方式比useEffect方案更简洁，逻辑完全封装在点击事件处理中，不需要额外维护依赖数组，也减少了组件的副作用逻辑。

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