react-quill 自定义保存按钮到 firebase

Question

好的，所以我正在尝试构建一个基于反应的笔记应用程序，保存到 firebase。我正在使用 react-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'
]

Answer 1

我的处理方式是使用包装器，例如：

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>
    )
  }
}

react-quill 自定义保存按钮到 firebase

react-quill custom save button to firebase

javascript

reactjs

quill