反应羽毛笔 js如何控制台登录更改处理程序？

如何解决反应羽毛笔 js如何控制台登录更改处理程序？

我目前正在创建一个博客仪表板，我是网络开发的初学者。对于编辑器，我使用的是 React quill .. 在文档中有一个关于更改处理程序的教程。但它只是控制台日志“文本更改”，我正在尝试使用我在 quill 编辑器上键入的任何内容更改控制台日志“文本更改”。

我的问题是。怎么做？这是我的 useEffect 代码：

   const { quill,quillRef } = usequill();
    const [isi,setisi] = useState('')
    
   useEffect(() => {
      if (quill) {
        quill.on('text-change',() => { 
            console.log('teks-changed! ')
        })
        
        
        
      }
    },[quill]);

解决方法

获取 quill 数据有两种选择：

在下一个示例中，我同时记录了两者：

import React,{ useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css"; // Add css for snow theme

export default () => {
  const { quill,quillRef } = useQuill();

  useEffect(() => {
    if (quill) {
      quill.on("text-change",(delta) => {
        console.log("delta",delta);
        console.log("innerHTML",quill.root.innerHTML);
      });
    }
  },[quill]);

  return (
    <div style={{ width: 500,height: 300 }}>
      <div ref={quillRef} />
    </div>
  );
};

您需要使用 quill.getText() 来获取文本。这是下面的完整工作代码。

const { quill,quillRef } = useQuill();
  React.useEffect(() => {
    if (quill) {
      quill.on('text-change',(e) => {
        const text = quill.getText();
        console.log(text);
      });
    }
  },[quill]);