Использование HTMLFormElement.reset () с Downshift и response-hook-form

Я использую DownshiftJS для создания компонента автозаполнения с помощью хука useCombobox. Все идет хорошо, тестирую с react-hook-form. К сожалению, я столкнулся с проблемой, когда функция сброса, доступная в react-hook-form, которая запускает метод HTMLFormElement.reset(), не вызывает никаких изменений состояния / ввода в компоненте Downshift.

Это означает, что когда пользователь выбирает элемент из списка (который запускает событие в Autocomplete), нажимает кнопку сброса, а затем снова щелкает ввод, список фильтруется только до ранее выбранного элемента. Это связано с тем, что выбранный элемент хранится во внутреннем состоянии selectedItem.

Как я могу заставить метод сброса инициировать изменение в компоненте Autocomplete и очистить состояние selectedItem?

Я изолировал проблему здесь.


reactjs javascript react-hook-form downshift
person Jetchy    schedule 30.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать React.useEffect, чтобы определить, нажимает ли пользователь кнопку сброса, и соответственно сбросить выбранные элементы в вашем Autocomplete компоненте.

const [inputItems, setInputItems] = useState(options);
const {
  inputValue,
  ...
} = useCombobox({
  items: inputItems,
  ...
});

React.useEffect(() => {
  if (!inputValue) {
    // user resets value. Reset selected option
    setInputItems(options);
  }
}, [inputValue, options, setInputItems]);

Живая демонстрация

Отредактируйте 64144984 / using-htmlformelement-reset-with-downshift-and-react-hook- форма

person NearHuscarl    schedule 01.10.2020
comment
Спасибо. Итак, это сработало, потому что я был обеспокоен значением в selectedItem, когда на самом деле никому не нужно беспокоиться о том, что находится в состоянии selectedItem. Значение можно получить из inputValue. - person Jetchy; 01.10.2020