React中使用Quill编辑器时，如何实时同步内容到state？

设计师明艳提问于 2026-01-27 23:51:19 阅读 55

组件

在React项目里用@react-quill集成富文本编辑器，但发现内容变化时state没有及时更新。我尝试监听onChange事件，但控制台只在初始化时触发一次…


import React, { useState, useEffect } from 'react';
import Quill from 'react-quill';

const Editor = () => {
  const [content, setContent] = useState('');

  useEffect(() => {
    const quill = new Quill('#editor');
    quill.on('change', () => {
      setContent(quill.root.innerHTML);
    });
  }, []);

  return ;
};

export default Editor;

这样写的话输入内容时state还是没反应，控制台也没有报错。是不是事件监听的方式有问题？或者需要在组件里用ref管理实例？

富文本编辑器

我来解答赞 6 收藏

反馈

2 条解答

Prog.炳诺 Lv1

你这样直接 new Quill 会脱离 React 的控制，应该用 ref 获取编辑器实例。我之前这样搞的：

const Editor = () => {

  const [content, setContent] = useState('');

  const quillRef = useRef(null);



  useEffect(() => {

    if (quillRef.current) {

      quillRef.current.on('change', () => {

        setContent(quillRef.current.root.innerHTML);

      });

    }

  }, []);



  return <Quill id="editor" ref={quillRef} />;

};

2026-02-03 08:02

程序猿红霞 Lv1

你这个问题我之前也踩过坑，确实挺头疼的。问题出在你混用了原生 Quill 和 @react-quill 的 API，这样会导致事件监听不生效。

正确的做法是直接用 @react-quill 提供的 onChange 属性来同步内容到 state。下面是改好的代码：

import React, { useState } from 'react';

import ReactQuill from 'react-quill'; 



const Editor = () => {

  const [content, setContent] = useState('');



  const handleContentChange = (value) => {

    setContent(value);

  };



  return (

    <ReactQuill

      theme="snow"

      value={content}

      onChange={handleContentChange}

    />

  );

};



export default Editor;

关键点：
1. 不要用原生 Quill 的实例，@react-quill 已经封装好了
2. value 和 onChange 配合使用，就能实时同步内容了

我之前也是乱用原生 API 结果折腾半天，后来才发现官方文档里早就写明白了，就是有时候我们容易忽略这些细节。

2026-01-30 08:08