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

Posted 2023-04-18

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

【英文标题】：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?

【发布时间】：2021-10-06 17:24:50

【问题描述】：

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

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

我希望这能奏效，因为它非常简单，而且我有几个月的 React 经验。只是一个正常的监控更改输入。没有错误消息，只是一种异常行为。

我曾尝试在 *** 上进行搜索，但我只发现了一些老问题，其答案看起来像是 hack，例如使用 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>
  );

【参考方案1】：

我更改了 ObservationsField 中的input 标签

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

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

【讨论】：

我希望在输入的字符之后看到光标，而不是在输入中的所有文本之后。

删除value和crtVal：codesandbox.io/s/silly-morse-8ht8t?file=/src/App.tsx

你能解释一下它是如何比原来的沙盒更好的吗？我最初想在 ObservationsField 中保留输入的内部状态，以便将来使用它。我看不到您的更改是如何工作的，但它们确实有效，我想接受您的回答。谢谢。

只有onChange 函数应该在ObservationsField 中调用，setX(ev.target.value); 会在App 上进行绑定，如果将<p>value</p> 放在@987654334 中，则将x 传递给ObservationsField @。将值放在ObservationsField 标签中会导致意外结果。