Я использовал библиотеку реаги-редукс-тостр для нашего проекта.Эта библиотека прекрасно работает, за исключением этого случая: codesandbox :
import React from "react";
import { useCallback } from "react";
import debounce from "lodash/debounce";
import { toastr } from "react-redux-toastr";
export default function Input({ value, onChange }) {
const toast = useCallback(
debounce(() => {
toastr.error("Interupt your typing", "Sorry, I blur your text input");
}, 500)
);
const setValue = e => {
onChange(e.target.value);
toast();
};
return (
<input
style={{ width: 500 }}
type="text"
value={value}
onChange={setValue}
/>
);
}
По сути, мы хотим, чтобы пользователь продолжал вводить данные, и неуверенно вызывал некоторый API для обновления ввода в базу данных.Все, что вызов API успешно, покажите тост.Однако всякий раз, когда отображается тост, ввод текста не сфокусирован.
в демоверсии CodeSandbox , вы можете попробовать набрать что-нибудь и посмотреть, в чем проблема.
Спасибо.