当不使用 target.value 时，React 输入会丢失 onChange 中的插入符号位置

Question

我正在尝试从 React 中的输入字段拦截关键事件。我想用不同的键替换每个键，并将插入符位置保留在原来的位置。现在，我尝试了 onChange 和 onKeyDown 监听器。

如果我像下面一样使用 onChange，输入字段会将其插入符号保留在其位置。

      <Input
        type="text"
        placeholder="Kelime"
        onChange={(hadise) => {
          hususlar.kelimeTebdiliHalinde(hadise.target.value);
        }}
        value={hususlar.kelime}
      />

但是，如果我尝试执行如下操作，插入符号会跳到输入字段的末尾。

      <Input
        type="text"
        placeholder="Kelime"
        onChange={(hadise) => {
          const metin = hadise.target.value + "3";
          hususlar.kelimeTebdiliHalinde(metin);
        }}
        value={hususlar.kelime}
      />

我开始相信，这个 target.value 不是一个简单的字符串，或者 React 正在 onChange 中执行某些操作，并且插入符位置在触摸 target.value 时保持原样。

在 onKeyDown 的情况下，我将替换键并将其添加到字符串中，然后更改状态以重绘输入字段。这也会导致失去插入符的位置。

我尝试找到 target.value's 类型，但找不到。

我可以通过在引用中保留插入符的位置并使用它来更新 useEffect 中的插入符位置来解决这个问题，但我不想这样做。我想了解其原因并以更好的方式解决它。

Answer 1

您似乎遇到了一个问题，即在 React 中使用 onChange 事件处理程序时，输入字段中的插入符号位置受到影响。当您直接修改输入字段的值并将其分配给target.value时，插入符号位置保持不变。但是，如果您操作该值然后将其分配回来，插入符号位置会跳到末尾。

此行为可能是由于 React 处理输入事件和更新的方式造成的。当您直接修改值时，React 能够跟踪插入符位置并保留它。但是，当您修改 React 控制之外的值然后将其分配回来时，React 可能无法准确跟踪插入符位置，导致其重置。

一种可能的解决方案是使用 refs 和 useEffect 手动管理插入符位置，正如您所提到的。另一种方法可能是在 React 中使用受控组件，在其中维护输入值的状态并相应地更新它。这样，React 可以更好地跟踪输入值的更改并保留插入符位置。

总的来说，了解 React 如何处理输入事件和更新以确保与输入字段中的插入符位置保持一致的行为非常重要。

这是示例代码 第一种情况

<Input
  type="text"
  placeholder="Kelime"
  onChange={(event) => {
    hususlar.kelimeTebdiliHalinde(event.target.value);
  }}
  value={hususlar.kelime}
/>

第二种情况

<Input
  type="text"
  placeholder="Kelime"
  onChange={(event) => {
    const metin = event.target.value + "3";
    hususlar.kelimeTebdiliHalinde(metin);
  }}
  value={hususlar.kelime}
/>

在这两种情况下，onChange 处理函数都采用事件参数，并使用 event.target.value 访问输入字段的值。