React中如何通过按钮将ReactQuill内容输出到控制台？

你的代码存在两个核心问题导致功能失效：

1. ReactQuill未绑定onChange事件，编辑器输入的内容无法同步到text状态中
2. 按钮的点击函数接收的是点击事件对象，而非编辑器的文本内容

修正后的代码如下：

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 需引入样式保证编辑器正常渲染

export default function Editor() {
    const [text, setText] = useState("");

    // 按钮点击时直接打印已同步的编辑器内容
    const handleButtonClick = () => {
        console.log(text);
    }

    return (
        <>
            <button type="button" onClick={handleButtonClick}>
                Click Me
            </button>
            <ReactQuill
                placeholder="Write something"
                value={text}
                onChange={setText} // 绑定onChange，同步编辑器内容到text状态
            />
        </>
    )
}

关键修改说明 #

• 给ReactQuill添加onChange={setText}：编辑器内容变化时，会自动将最新内容更新到text状态，确保状态与编辑器内容实时同步
• 重写按钮点击函数：直接读取text状态并打印，因为text已经实时反映了编辑器的内容
• 补充引入ReactQuill样式文件：这是编辑器正常渲染的必要步骤，容易被遗漏

内容的提问来源于stack exchange，提问作者MVB