Почему бы не работать реагировать-quill getEditor из нуля - PullRequest
Новая
       33

Почему бы не работать реагировать-quill getEditor из нуля

1 голос
/ 21 марта 2019

Я создаю реактивное приложение в Project с содержимым, отредактированным с помощью React Quill.Мое приложение позволяет добавить getEditor ().Моя проблема в том, что он не работает

Помогите мне, я глухой ... Не знаю, я объясню ... "Ref" и "getEditor ()" не работают.Ошибка типа: не удается прочитать свойство '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>
...