输入光标没有停留在它所在的位置，它会在输入文本的最后一个位置再次移动

Question

代码如下：

 const [expression, setExpression] = useState("");

 const Remove = () => {        
    const input = document.getElementById("input");
    if (expression.length > 0) {
        const pos = input.selectionStart;
        if (pos > 0) {
     setExpression(expression.substring(0, pos - 1) + expression.substring(pos));
          input.focus();
          input.selectionStart = pos - 1;
          input.selectionEnd = pos - 1;
        }
      }
}

return (
<>
<input id="input" value={expression} />
<button onClick={Remove}>remove</button>
</>
)

我想在单击按钮时删除光标位于输入框中的文本，但在删除数字后光标在输入文本的末尾一次又一次地移动。我希望它保持在输入字段中的位置，而不是放在输入框文本的末尾。

Answer 1

您可以通过 有状态 和 无状态 的方式进行操作。

有状态

  const [expression, setExpression] = useState("");
  const [cursorPos, setCursorPos] = useState(0);

  useEffect(() => {
    const input = document.getElementById("input");
    input.focus();
    input.setSelectionRange(cursorPos, cursorPos);
  }, [cursorPos, expression]);

  const handleInput = (e) => {
    setExpression(e.target.value);
    const input = document.getElementById("input");
    setCursorPos(input.selectionStart);
  }

  const Remove = () => {
    const input = document.getElementById("input");
    if (expression.length > 0) {
      const pos = input.selectionStart;
      if (pos > 0) {
        setExpression(
          expression.substring(0, pos - 1) + expression.substring(pos)
        );
        setCursorPos(pos - 1);
      }
    }
  };

  return (
    <>
      <input id="input" value={expression} onInput={handleInput} />
      <button onClick={Remove}>remove</button>
    </>
  );

无状态，使用 ref

  const inputRef = useRef();

  const Remove = () => {
    const input = inputRef.current;
    const value = input.value;
    if (value.length > 0) {
      const pos = input.selectionStart;
      if (pos > 0) {
        input.value = value.substring(0, pos - 1) + value.substring(pos);
        input.focus();
        input.selectionStart = pos - 1;
        input.selectionEnd = pos - 1;
      }
    }
  };

  return (
    <>
      <input id="input" ref={inputRef} />
      <button onClick={Remove}>remove</button>
    </>
  );