当输入值来自提供程序时，光标跳转到末尾"unstated"

Question

我当前已经面临提供者(来自未陈述的LIB(和输入的问题。在我们的项目中，我们必须在几个组件之间共享输入值，因此我们创建了一个包含值的提供商(使用未陈述的LIB(。借助SearchFields函数，这些值将作为支撑物传递到搜索形式组件中。

当前行为是什么？问题是，每当我们想在任何位置更新值时，光标都会跳到输入末尾。例如，我有" AAAA"，如果我在输入的中间输入了许多" B"以使其具有" Aabbbbbaa"，则结果将是" Aabaabbbb"

预期的行为是什么？光标不会到达末端。

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

哪些版本的反应？16.8.6

谢谢您的帮助！

Answer 1

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

1. 设置输入状态

const [inputValue, setValue] = useState(value);
  <input
    onChange={event => {
    const { target } = event;
      setValue(target.value);
    }}

2. 将onBlur传递给输入

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

3. 更新unstated onBlur状态

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

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