react-redux-toastr：当吐司显示时，文本输入模糊

Question

我在我们的项目中使用库react-redux-toastr。除了以下情况外，该库运行良好：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 demo中，您可以尝试输入任何内容，然后查看问题出在哪里。

谢谢。