React-Quill自定义保存按钮到Firebase

福法斯特

好的，所以我试图构建一个基于React的Notes应用程序，该应用程序可以保存到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'
]

阿纳斯

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。