将焦点放在具有禁用属性的输入的输入元素上答案

【问题标题】：React focus on an input element that have input with disabled property将焦点放在具有禁用属性的输入的输入元素上
【发布时间】：2021-04-24 19:12:00
【问题描述】：

我有一个禁用 true 的输入元素。现在，一旦我单击一个按钮，我想将 disabled 设置为 false 并专注于输入元素。

我已经尝试过 react docs 中描述的 useRef 选项，如果我删除了 disabled 属性但它们都不能一起工作，它可以工作。


const [edit, setEdit] = useState(false);
const searchInput = useRef(null);
return (
  <>
    <input
      ref={searchInput}
      type="text"
      name="wnique_name"
      id="unique_id"
      disabled={!edit}
    />

    <button
      onClick={() => {
        setEdit(true);
        searchInput.current.focus();
      }}
    >
      Edit
    </button>
  </>
);

【问题讨论】：

disabled 元素不可聚焦 - 请参阅 here。您可能需要readOnly 属性而不是disabled，如果它不应该是可编辑但仍可聚焦的话。

标签： javascript reactjs

【解决方案1】：

您需要添加useEffect 以检查何时启用输入。

useEffect(() => {
    if (edit) {
      searchInput.current.focus();
    }
  }, [edit]);

  return (
    <>
      <input
        ref={searchInput}
        type="text"
        name="wnique_name"
        id="unique_id"
        disabled={!edit}
      />

      <button
        onClick={() => {
          setEdit(true);
        }}
      >
        Edit
      </button>
    </>
  );

【讨论】：

【解决方案2】：

组件需要重新渲染并“启用”输入。使用 setTimeout 快速修复：

 onClick={() => {
  setEdit(true);
  setTimeout(() => {
     searchInput.current.focus();
  })
  ...

【讨论】：