是否可以通过 React-Quill 中的键盘处理程序来调度操作？

Question

我有一个使用 React-Quill 创建的聊天输入，我想更改“Enter”按键的行为 - 从添加新行到分派操作。然而由于某种原因我无法这样做 - 请参阅此playground

代码在这里：

function Editor() {
  const [code, setCode] = useState("initial text");
  const [fakeStore, fakeDispatch] = useState("nothing");

  const send = (text) => {
    fakeDispatch(text);
  };

  const modulesSend = {
    keyboard: {
      bindings: {
        custom: {
          key: "Enter",
          handler: send,
        },
      },
    },
  };

  const memoModulesSend = useMemo(
    () => ({
      keyboard: {
        bindings: {
          custom: {
            key: "Enter",
            handler: send,
          },
        },
      },
    }),
    [],
  );

  const handleProcedureContentChange = (content, delta, source, editor) => {
    setCode(content);
  };

  return (
    <>
      <p>{fakeStore}</p>
      1
      <ReactQuill
        theme="snow"
        modules={modulesSend}
        onChange={handleProcedureContentChange}
      />
      2
      <ReactQuill
        theme="snow"
        defaultValue={code}
        modules={memoModulesSend}
        onChange={handleProcedureContentChange}
      />
    </>
  );
}

我知道模块有时需要记忆，但在这里没有帮助。为什么当处理程序调用组件主体中的正常函数时，浏览器会崩溃？

Answer 1

const modules = useMemo(
        () => ({
            toolbar: [
                ['bold', 'italic', 'underline','blockquote', 'code-block'],
            ],
            keyboard: {
                bindings: {
                    enter: {
                        key: 13,
                        handler: function () {
                            return false;
                        }
                    }
                }
            },
        }),
        [],
    );

Try it!