当输入值来自“未声明”的提供程序时，光标跳到结尾

Question

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

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

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

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

React的哪个版本？ 16.8.6

谢谢您的帮助！

Answer 1

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

1. 设置输入状态

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

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

1. 将onBlur传递到输入

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

1. 通过unstated更新onBlur状态

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

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