Javascript can'；t在react quill自定义处理程序上调用ref（也包括状态、道具、函数等）

我对react上的羽毛笔编辑器有问题。

imageHandler（）

运行良好。
但在

imageHandler（）

中，它也不能调用状态、道具、函数等其他功能。
我想在module.toolbar.handlers调用的

imageHandler（）

中调用quillRef

下面是我的简单代码

import React，{Component}来自'React'；
从“react quill”导入react quill；//ES6
常量格式=[
“标题”、“字体”、“大小”，
“粗体”、“斜体”、“下划线”、“删除”、“块引号”，
“列表”、“项目符号”、“缩进”，
“链接”、“图像”、“视频”
]
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={text:'}
this.handleChange=this.handleChange.bind（this）
this.reactQuillRef=null；//ReactQuill组件
this.quillRef=null；//Quill实例
}
模块={
工具栏：{
容器：[[bold]、[italic]、[underline]、[blockquote]，
[{'list'：'ordered'}，{'list'：'bullet'}]，
['image']，
],
处理程序：{
“image”：this.imageHandler
}
}
}
componentDidMount（）{
这个。附件quillrefs（）
}
componentDidUpdate（）{
这个。附件quillrefs（）
}
附件引用=（）=>{
if（typeof this.reactQuillRef.getEditor！=“function”）返回；
this.quillRef=this.reactQuillRef.getEditor（）；
}
imageHandler（）{
常量输入=document.createElement（'input'）；
input.setAttribute（'type'，'file'）；
setAttribute（'accept'，'image/*'）；
输入。单击（）；
input.onchange=（）=>{
const file=input.files[0]；
console.log（文件）；//工作正常
//问题：无法调用ref、props、function等
console.log（“ref:，this.reactQuillRef，this.quillRef）；//取消定义
//this.insertImg（）；//不工作（insertImg不是函数）
console.log（this.props）；//取消定义
};
}
handleChange（值）{
this.setState（{text:value}）；
this.refs.test.innerHTML=this.state.text；
}
插入mg=（）=>{
log（“insertImg”，原型）；
var range=this.quillRef.getSelection（）；
让位置=范围？范围索引：0；
console.log（this.quillRef）；//工作正常！！！！！！！！！为什么与imgHandler（）不同
this.quillRef.insertEmbed（位置，'image'，'https://images.pexels.com/photos/47480/pexels-photo-47480.jpeg?auto=compress&cs=tinysrgb&h=350');
}
render（）{
返回(
插入Img
{this.reactQuillRef=el}}
/>



{this.state.text}
);
}
}
导出默认应用程序
imageHandler
未被调用，因为它未绑定到
App
组件
此

在对象
模块
中，
此
引用
模块
，而不是
应用程序
组件

保存
this
ref并在
modules
对象中使用它

模块对象

constructor(){
  super();


  this.modules = {
    toolbar: {
      container: [['bold', 'italic', 'underline', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['image'],
      ],
      handlers: {
        'image': this. imageHandler
      }
    }
  }
}

检查未调用imageHandler，因为它未绑定到
应用程序
组件
此

在对象
模块
中，
此
引用
模块
，而不是
应用程序
组件

保存
this
ref并在
modules
对象中使用它

模块对象

constructor(){
  super();


  this.modules = {
    toolbar: {
      container: [['bold', 'italic', 'underline', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['image'],
      ],
      handlers: {
        'image': this. imageHandler
      }
    }
  }
}

检查
谢谢您的回答！在我的代码中，
imageHandler
被调用。但是在
imageHandler
中，它不能调用refs（比如函数、状态、道具）。我正试图用你的答案修复我的代码。再次感谢你！我试过很多像你说的那样的方法。我能回答更多吗？我把
const self=this放在哪里？类应用程序的顶部扩展了组件{…}
？还是在
App
class？@YeongHunCha我已经更新了答案。请将模块放在constructor中。因此，这将在mdules object中可用谢谢您的回答！在我的代码中，
imageHandler
被调用。但是在
imageHandler
中，它不能调用refs（比如函数、状态、道具）。我正试图用你的答案修复我的代码。再次感谢你！我试过很多像你说的那样的方法。我能回答更多吗？我把
const self=this放在哪里？类应用程序的顶部扩展了组件{…}
？还是在
App
class？@YeongHunCha我已经更新了答案。请将模块放在constructor中。因此，这将在mdules对象中可用