reactjs - 如何访问 ReactQuill api？

Question

我需要<ReactQuill/>使用按钮访问。例如，我单击按钮并删除或保存ReactQuill. 但我无法理解如何正确访问ReactQuillReact 中的功能。例如，他们建议使用quill变量来访问该组件的功能。例如删除组件的内容quill.setContents([{ insert: '\n' }]) 但问题是如何正确定义它？

我试着像在一些例子中那样做，但没有奏效。

const [quill, setQuill] = useState(null);

       <ReactQuill
        style={{height: '45vh', marginBottom: '1px'}}
        ref={(el) => {
         setQuill(el)
        }}
      />
 
     <Button type="primary" icon={<DeleteOutlined />} 
       onClick={()=> 
        quill.setContents([{ insert: '\n' }])}
      >Clear</Button>

也许有人知道如何正确定义他们的 quill 变量？我正在浏览他们的文档，但是没有帮助。

Answer 1

使用 ref 而不是 useState

const quill = useRef();

<ReactQuill
    style={{height: '45vh', marginBottom: '1px'}}
    ref={quill}
/>

<Button type="primary" icon={<DeleteOutlined />} 
    onClick={()=> 
    quill.current.editor.insertText(0, "text")}
>Clear</Button>