javascript - 我想通过单击 React js 中的按钮来选择输入框中的文本，但我的代码不起作用

Question

当我单击焦点按钮时，我想更改输入框中的文本，然后选择它。 但我必须单击按钮两次才能完成此任务，也就是说，当我第一次单击按钮时，仅更改值，当我再次单击时，将选择文本

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

export default function App() {
  const [name, setName] = useState('')
  const inputRef = useRef();
  const editItem = () => {
    setName('ray')
    inputRef.current.select();
  };
  return (
    <>
      <input
        ref={inputRef}
        type="text"
        value={name}
        placeholder="e.g. eggs"
        onChange={(e)=>setName(e.target.value)}
      />
      <button type="button" className="edit-btn" onClick={editItem}>
        Focus
      </button>
    </>
  );
}

Answer 1

您可以使用useEffect钩子(Hook)来触发文本选择。每当单击焦点按钮时，就会切换 focus 变量。因此，每次点击都会选择文本。

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

export default function App() {
  const [name, setName] = useState("");
  const [focus, setFocus] = useState(false);
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.select();
  }, [focus]);
  const editItem = () => {
    setName("ray");
    setFocus(!focus);
  };
  return (
    <>
      <input
        ref={inputRef}
        type="text"
        value={name}
        placeholder="e.g. eggs"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="button" className="edit-btn" onClick={editItem}>
        Focus
      </button>
    </>
  );
}