如何解决文本输入中的文本光标在输入字符后自动放置在输入末尾的问题？

Question

我偶然发现了这个看起来很容易解决的错误。 This 是代码沙箱，我相信它很小。

我把代码也放在这里，方便回答。

我希望它能工作，因为它非常简单，而且我有大约几个月的 React 经验。只是一个正常的监视更改输入。没有错误消息，只有异常行为。

我尝试在 Whosebug 上进行搜索，但我只找到了答案看起来像黑客的旧问题，例如使用 onKeyUp 而不是 onChange 和 defaultValue 而不是 value。

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

const ObservationsField = ({
  onChange,
  value
}: {
  onChange: (ev: ChangeEvent<HTMLInputElement>) => void;
  value: string;
}) => {
  const [crtVal, setCrtVal] = useState("");

  useEffect(() => {
    setCrtVal(value);
  }, [value]);

  return <input onChange={onChange} value={crtVal} defaultValue={value} />;
};

export default function App() {
  const [x, setX] = useState("");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ObservationsField
        onChange={(ev) => {
          setX(ev.target.value);
        }}
        value={x}
      />
    </div>
  );
}

Answer 1

我更改了 ObservationsField 中的 input 标签

return <input type="text" onChange={onChange} value={crtVal} />;

https://codesandbox.io/s/charming-neumann-6wnw4?file=/src/App.tsx
x 与输入绑定。你会期待什么？

如何解决文本输入中的文本光标在输入字符后自动放置在输入末尾的问题？

How to solve the issue of a text cursor in a text input being automatically placed at the end of the input after a typed character has been inserted?

input

textinput

typescript

reactjs

text-cursor