пользовательская кнопка сохранения response-quill в firebase

Хорошо, поэтому я пытаюсь создать приложение для заметок на основе реакции, которое сохраняет в firebase. Я использую response-quill в качестве текстового редактора, и в настоящее время у меня возникают проблемы с отправкой данных редактора в firebase, когда я нажимаю настраиваемый значок сохранения, который я вставил на панель инструментов. Я весь день возился с этим, и теперь чувствую, что просто рву волосы, пытаясь заставить это работать. Если кто-нибудь может просмотреть этот компонент и помочь мне разобраться в этом, я был бы очень признателен.

import React, { Component } from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import fire from '../../firebase'
import * as Icon from 'react-feather'

const CustomButton = () => <Icon.Save onClick={NoteEditor.modules.toolbar.handlers.writeUserNotes} />

const CustomToolbar = () => (
  <div id='toolbar'>
    <select className='ql-header' defaultValue={''} onChange={e => e.persist()}>
      <option value='1' />
      <option value='2' />
      <option selected />
    </select>
    <button className='ql-bold' />
    <button className='ql-italic' />
    <select className='ql-color'>
      <option value='red' />
      <option value='green' />
      <option value='blue' />
      <option value='orange' />
      <option value='violet' />
      <option value='#d0d1d2' />
      <option selected />
    </select>
    <button className='ql-save'>
      <CustomButton />
    </button>
  </div>
)

export default class NoteEditor extends Component {
  constructor (props) {
    super(props)
    this.state = { text: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  writeUserNotes (user) {

  }

  handleChange (value) {
    this.setState({ text: value })
  }

  render () {
    return (
      <div className='text-editor w-80'>
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          modules={NoteEditor.modules}
          formats={NoteEditor.formats}
          theme={'snow'}
        />
      </div>
    )
  }
}

NoteEditor.modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      writeUserNotes: () => {
        fire.database().ref('/notes').set({
          note: 
        })
      }
    }
  },
  clipboard: {
    matchVisual: false
  }
}

NoteEditor.formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'color'
]


reactjs javascript quill
person Fofaster    schedule 24.08.2018    source источник
comment
Почему твоя записка пуста? writeUserNotes: () => { fire.database().ref('/notes').set({ note: }) }   -  person Anas    schedule 24.08.2018
comment
у меня было это как this.state.text, но это не сработало.   -  person Fofaster    schedule 24.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я бы справился с этим с помощью оболочки, например:

class App extends React.Component {
  state = {
    notes: '',
  }

  handleChange = (notes) => { 
     this.setState({ notes }) 
  }

  handleClick = () => { 
    fire.database().ref('/notes').set({
      note: this.state.notes
    })
  }

  render () {
    return (
      <div>
        <CustomToolbar onClick={this.handleClick} />
        <NoteEditor onChange={this.handleChange} />
      </div>
    )
  }
}
person Anas    schedule 24.08.2018