2

我正在 Project 中创建一个 reactjs 应用程序，其内容是用 React Quill 编辑的。我的应用程序允许你添加getEditor()。我的问题是它不起作用

帮帮我，我是聋子……我不知道，我会解释……“Ref”和“getEditor()”不起作用。TypeError：无法读取 null 的属性“getEditor”

import React, { Component } from 
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
  toolbar: [
    [{ header: [1, 2, 3, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [
      { list: 'ordered' },
      { list: 'bullet' },
      { indent: '-1' },
      { indent: '+1' },
    ],
    ['link', 'image', 'video'],
    ['clean'],
  ],
};

const formats = [
  'header',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'video',
];

class LayoutApuntes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isText: '',
      isActiveEditable: false,
    };
    this.quillRef = null;
    this.reactQuillRef = null;
  }

  componentDidMount() {
    this.attachQuillRefs();
  }

  attachQuillRefs() {
    if (typeof this.reactQuillRef.getEditor !== 'function') return;
    if (this.quillRef != null) return;

    console.log('Registering formats...', this.reactQuillRef);
    const quillRef = this.reactQuillRef.getEditor();

    if (quillRef != null) {
      this.quillRef = quillRef;
    }
  }

  handleEditable = ev => {
    this.setState(prevState => ({
      isActiveEditable: !prevState.isActiveEditable,
    }));
  };

  handleChangeText = value => {
    this.setState({ isText: value });
    const id = this.props.match.params.id;
    const db = this.props.firestore;
    db.update(`notescornell/${id}`, { apunte: this.state.isText });
  };

  render() {
    const { notescornell, apunte } = this.props;
    const { isText, isActiveEditable } = this.state;
    const visibleText = <div dangerouslySetInnerHTML={{ __html: apunte }} />;
    return (
      <div>
        <Heading
              <ReactQuill
                ref={e => (this.reactQuillRef = e)}
                defaultValue={isText || ''}
                onChange={this.handleChangeText}
                modules={modules}
                formats={formats}
              />
      </div>
    );
  }
}

export default LayoutApuntes;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

4

0 回答 0