时间戳

首页 > 解决方案 > 从同一功能设置禁用道具和焦点的问题

reactjs - 从同一功能设置禁用道具和焦点的问题

问题描述

我正在尝试构建编辑表单字段。在这里，您必须先按一个按钮，然后才能编辑表单域。但是，我在切换禁用的道具和设置元素的焦点时遇到了问题。这是一些示例代码。只有在我单击按钮两次后，输入才会聚焦。

export default function App() {
  const [isDisabled, setIsDisabled] = useState(true);
  const inputEl = useRef(null);

  const onBlur = () => {
    setIsDisabled(true);
  };

  const handleEditClick = () => {
    setIsDisabled(false);
    inputEl.current.focus();
  };

  return (
    <div className="App">
      <h1>Focus problem</h1>
      <h2>Focus only happens on the scond click!</h2>
      <input ref={inputEl} onBlur={onBlur} disabled={isDisabled} />
      <button onClick={() => handleEditClick()}>Can edit</button>
    </div>
  );
}

这是一个代码沙箱

标签： reactjs

解决方案

在 DOM 元素上设置焦点是一个副作用，它应该在 useEffect 中完成：

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [isDisabled, setIsDisabled] = useState(true);
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, [isDisabled]);

  const onBlur = () => {
    setIsDisabled(true);
  };

  const handleEditClick = () => {
    setIsDisabled(false);
  };

  return (
    <div className="App">
      <h1>Focus problem</h1>
      <h2>Focus only happens on the scond click!</h2>
      <input ref={inputEl} onBlur={onBlur} disabled={isDisabled} />
      <button onClick={() => handleEditClick()}>Can edit</button>
    </div>
  );
}

推荐阅读