Курсор переходит в конец, когда входное значение поступает от "неустановленного" провайдера

Question

Я в настоящее время сталкиваюсь с проблемой с поставщиком (из неустановленной библиотеки) и ввода. В нашем проекте мы должны делиться входными значениями между несколькими компонентами, поэтому мы создали провайдера (с неустановленной библиотекой), который содержит значения. Значения передаются как реквизиты в компонент SearchForm благодаря функции withSearchFields.

Каково текущее поведение? Проблема в том, что каждый раз, когда мы хотим обновить значение в любой позиции, курсор переходит к концу ввода. Например, у меня есть "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);
    }}

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