Javascript 如何在react quill图像处理程序中访问道具

我正在为我的项目使用react quill editor，并使用我的后端服务器上载图像，但我需要访问react quill的图像处理程序中的道具，我无法这样做，因为无法访问图像处理程序中的此对象。 这是我的编辑器代码

<ReactQuill
  ref={(el) => (this.quillRef = el)}
  onChange={this.handleChange}
  placeholder={"share your thoughts"}
  modules={{
    toolbar: {
      container: [
        [{ header: "1" }, { header: [2, 3, 4, 5, 6] }, { font: [] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [{ list: "ordered" }, { list: "bullet" }],

        ["link", "image", "video"],
        ["clean"],
        ["code-block"],
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme

        [{ align: [] }],
      ],
      handlers: {
        image: this.imageHandler,
      },
    },
  }}
/>;

function imageHandler() {
  let self = this;
  let image;
  let image_extension;
  const Cryptr = require("cryptr");
  const cryptr = new Cryptr(key);
  const users = localStorage.getItem("users")
    ? JSON.parse(cryptr.decrypt(localStorage.getItem("users")))
    : {};
  // console.log(users[users.lastLoginId])
  let loggedinUser = users[users.lastLoginId];
  const input = document.createElement("input");

  input.setAttribute("type", "file");
  input.setAttribute("accept", "image/*");
  input.setAttribute("class", "Editor-mage");
  input.click();

  input.onchange = async () => {
    //debugger
    const file = input.files[0];

    var ValidImageTypes = [
      "image/gif",
      "image/jpeg",
      "image/png",
      "image/jpg",
      "image/GIF",
      "image/JPEG",
      "image/PNG",
      "image/JPG",
    ];
    let file_type = file.type;
    let filename = file.name;
    let extension = filename.split(".").pop();
    if (ValidImageTypes.indexOf(file_type) >= 0) {
      if (true) {
        var fileToLoad = file;

        loadImage(
          fileToLoad,
          (canvas) => {
            if (canvas) {
              // this.setState({
              image = canvas.toDataURL();
              image_extension = extension;
              //});

              const res = new Promise(function (resolve, reject) {
                axios({
                  method: "post",
                  url: API_URL + "api/v1/postblogimage",
                  headers: {
                    "x-access-handler": loggedinUser.token,
                  },
                  data: {
                    image: image,
                    image_extension: image_extension,
                    userid: loggedinUser.userid,
                  },
                })
                  //axios.post(API_URL + 'api/v1/postblogimage', formData, config)
                  .then((response) => {
                    //debugger
                    if (
                      response.data.error == "false" ||
                      response.data.error == false
                    ) {
                      if (
                        response.data.status == 200 &&
                        response.data.message == "Image uploaded successfully"
                      ) {
                        //debugger
                        const range = self.quill.getSelection(true);

                        // Insert temporary loading placeholder image
                        // this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);

                        // Move cursor to right side of image (easier to continue typing)
                        self.quill.setSelection(range.index + 1);

                        // Remove placeholder image
                        self.quill.deleteText(range.index, 1);

                        // Insert uploaded image
                        let url = response.data.data[0].imageURL;
                        self.quill.insertEmbed(range.index, "image", url);
                        self.quill.pasteHTML(
                          range.index,
                          <img
                            src={url}
                            class="blog-image-content"
                            alt="Responsive image"
                          />
                        );
                      }
                    }

                    // }
                  })
                  .catch((error) => {
                    // reject(Error("It broke"));
                  });
              });
            }
          },
          { orientation: true }
        );
      } else {
        // this.setState({
        // image_warning:'File size larger than maximum allowed limit',
        image = "";
        image_extension = "";
        // })
        this.fileInput.value = "";
      }
    } else {
    }
  };
}

（this.quillRef=el）}
onChange={this.handleChange}
占位符={“分享你的想法”}
模块={{
工具栏：{
容器：[
[{header:“1”}，{header:[2,3,4,5,6]}，{font:[]}]，
[{size:[“小”，假，“大”，“大”]}，
[“粗体”、“斜体”、“下划线”、“删除”、“块引号”]，
[{list:“ordered”}，{list:“bullet”}]，
[“链接”、“图像”、“视频”]，
[“干净”]，
[“代码块”]，
[{color:[]}，{background:[]}]，//主题的默认下拉列表
[{align:[]}]，
],
处理程序：{
image:this.imageHandler，
},
},
}}
/>;
函数imageHandler（）{
让自我=这个；
让形象；
让图像扩展；
const Cryptr=require（“Cryptr”）；
const cryptr=新密码（密钥）；
const users=localStorage.getItem（“用户”）
？JSON.parse（cryptr.decrypt（localStorage.getItem（“用户”））
: {};
//console.log（用户[users.lastLoginId]）
让loggedinUser=users[users.lastLoginId]；
常量输入=document.createElement（“输入”）；
input.setAttribute（“类型”、“文件”）；
input.setAttribute（“接受”、“图像/*”）；
setAttribute（“类”、“编辑器图像”）；
输入。单击（）；
input.onchange=async（）=>{
//调试器
const file=input.files[0]；
var ValidImageTypes=[
“图像/gif”，
“图像/jpeg”，
“图像/png”，
“图片/jpg”，
“图像/GIF”，
“图像/JPEG”，
“图像/PNG”，
“图片/JPG”，
];
让file_type=file.type；
让filename=file.name；
让扩展名=filename.split（“.”.pop（）；
if（ValidImageTypes.indexOf（文件类型）>=0）{
如果（真）{
var fileToLoad=file；
加载映像(
文件加载，
（画布）=>{
如果（画布）{
//这是我的国家({
image=canvas.toDataURL（）；
图像扩展=扩展；
//});
const res=新承诺（函数（解析、拒绝）{
axios({
方法：“张贴”，
url:API_url+“API/v1/postblogimage”，
标题：{
“x-access-handler”：loggedinUser.token，
},
数据：{
图像：图像，
图像扩展：图像扩展，
userid:loggedinUser.userid，
},
})
//post（API_URL+'API/v1/postblogimage'，formData，config）
。然后（（响应）=>{
//调试器
如果(
response.data.error==“false”||
response.data.error==false
) {
如果(
response.data.status==200&&
response.data.message==“图像已成功上载”
) {
//调试器
常量范围=self.quill.getSelection（true）；
//插入临时加载占位符图像
//this.quill.insertEmbed（range.index，'image'，`${window.location.origin}/images/loaders/placeholder.gif`）；
//将光标移到图像的右侧（更易于继续键入）
自卷针设置选择（范围索引+1）；
//删除占位符图像
self.quill.deleteText（range.index，1）；
//插入上载的图像
让url=response.data.data[0].imageURL；
self.quill.insertEmbed（range.index，“image”，url）；
self.quill.pasteHTML(
range.index，
);
}
}
// }
})
.catch（（错误）=>{
//拒绝（错误（“它坏了”）；
});
});
}
},
{方向：正确}
);
}否则{
//这是我的国家({
//image\u警告：“文件大小大于允许的最大限制”，
image=“”；
image_extension=“”；
// })
this.fileInput.value=“”；
}
}否则{
}
};
}

有人能帮我解决这个问题吗，因为我在这件事上被困了很长时间。

---

非常感谢您的帮助和建议。

我认为您可以使用高阶函数

image: this.imageHandler(props)
...
function imageHandler(props) {
  return function() {
    let self = this;
    let image;
    ...
  }
}

---

我想你可以用高阶函数

image: this.imageHandler(props)
...
function imageHandler(props) {
  return function() {
    let self = this;
    let image;
    ...
  }
}

---

我阅读了Quilljs的文档

Handler functions will be bound to the toolbar (so using this will refer to the toolbar instance) and passed the value attribute of the input if the corresponding format is inactive, and false otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.

并发现imageHandler将在工具栏的上下文中调用，因此调用this.props时将无法按预期工作

因此，要获得道具访问权限，您可以执行以下操作：

handlers: {
    image: (val) => this.imageHandler({ val, componentProps: this.props });
  }

function imageHandler({ val, componentProps }) {
  // componentProps has all your propss, try to print it and see
  // rest of your code, instead of this.props.something take componentProps.something
}

在imageHandler中，您可以如下方式访问它：

handlers: {
    image: (val) => this.imageHandler({ val, componentProps: this.props });
  }

function imageHandler({ val, componentProps }) {
  // componentProps has all your propss, try to print it and see
  // rest of your code, instead of this.props.something take componentProps.something
}

---

如果有帮助，请告诉我。谢谢

我阅读了Quilljs的文档

Handler functions will be bound to the toolbar (so using this will refer to the toolbar instance) and passed the value attribute of the input if the corresponding format is inactive, and false otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.

并发现imageHandler将在工具栏的上下文中调用，因此调用this.props时将无法按预期工作

因此，要获得道具访问权限，您可以执行以下操作：

handlers: {
    image: (val) => this.imageHandler({ val, componentProps: this.props });
  }

function imageHandler({ val, componentProps }) {
  // componentProps has all your propss, try to print it and see
  // rest of your code, instead of this.props.something take componentProps.something
}

在imageHandler中，您可以如下方式访问它：

handlers: {
    image: (val) => this.imageHandler({ val, componentProps: this.props });
  }

function imageHandler({ val, componentProps }) {
  // componentProps has all your propss, try to print it and see
  // rest of your code, instead of this.props.something take componentProps.something
}

---

如果有帮助，请告诉我。谢谢

您需要访问哪些道具？我需要在图像处理程序中访问它，并在父组件和redux状态的道具中调用回调函数。您需要访问哪些道具？我需要在图像处理程序中访问它，并在父组件和redux状态的道具中调用回调函数