reactjs - 当输入值来自“未说明”的提供者时，光标跳转到结束

Question

我目前面临提供者（来自未说明的库）和输入的问题。在我们的项目中，我们必须在几个组件之间共享输入值，因此我们创建了一个包含这些值的提供程序（带有未说明的库）。由于 withSearchFields 函数，这些值作为道具传递给 SearchForm 组件。

当前的行为是什么？问题是，每次我们要更新任意位置的值时，光标都会跳到输入的末尾。例如，我有“aaaa”，如果我在输入的中间键入许多“b”以得到“aabbbbbaa”，结果将是“aabaabbbb”

预期的行为是什么？光标不会走到最后。

我已经简化了我们的代码并将其添加到 CodeSandbox 中：https ://codesandbox.io/s/n2w9xv090

哪些版本的 React ？16.8.6

谢谢您的帮助！

score 0 · Accepted Answer

您可以通过更新unstated状态onBlur。

const [inputValue, setValue] = useState(value);

  <input
    onChange={event => {
    const { target } = event;
      setValue(target.value);
    }}

  <input
    onChange={event => {
    const { target } = event;
      setValue(target.value);
    }}
    onBlur={onBlur}

  const handldBlur = event => {
    const { target } = event;
    props.setField(target.name, target.value);
  };

我修改了您的代码，您可以在 CodeSandbox 中对其进行测试：https ://codesandbox.io/s/priceless-kowalevski-2kdyn?fontsize=14

1 回答 1