如何在反应中管理外部库实例？

Question

我正在尝试在反应组件中使用Quill。我在组件安装后创建了quill实例。 Quill有一个getContents()方法，它将返回编辑器中我想发布到服务器的内容。

似乎我不能在我定义的任何处理程序中使用quill实例，如下面的saveSummary。

我想知道如何使用React

来处理创建和使用这些实例方法

import { connect } from 'react-redux'
import { actions } from 'react-redux-form'
import Quill from 'quill'
import 'quill/dist/quill.snow.css';

@connect((store) => {
  return {
    ...store
  }
})
export default class QuillEditor extends React.Component{
  // Constructor to set element state

  componentDidMount() {

    var toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],

      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],

      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],

      ['clean']
    ];

    var quill = new Quill('#quill-area', {
      modules: { toolbar: toolbarOptions },
      theme: 'snow'
    });

  }

  componentWillMount() {

  }

  saveSummary = () => {
    console.log(this.refs.quillEditor.childNodes[0].innerHTML)
  }

  render () {

    return (
      <div className="profile-quill">
        <button className="btn btn-primary" onClick={this.saveSummary}>Save</button>
        <div ref="quillEditor" id="quill-area"></div>
      </div>
    )
  }
};