javascript - react-quill 自定义保存按钮到 firebase
问题描述
好的,所以我正在尝试构建一个基于反应的笔记应用程序,以保存到 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>
)
}
}
推荐阅读
- ssl - 为本地使用创建 EV SSL 证书
- blockchain - 查找使 SHA1 哈希以四个零开头的随机数
- android - 在 Android 中循环播放声音
- java - java中的最终变量打印
- javascript - 在 JS 中创建动态表时出现问题。数字分别显示
- c++ - 如何以符合标准的方式方便地填充混合类型的缓冲区?
- reactjs - 在 React 中全屏拖放文件
- kubernetes-helm - helm-template 按键获取地图的值
- javascript - 如何使用多个 id 重构这种颜色变化
- asp.net-core - 托管在 IIS 上的 ASP.NET core 2.1 API