我已经实现了一个编辑器与tinymce包,我有 comments 插件.此外,我还构建了一个功能如下:当用户 Select 一个文本时,我将其存储在一个状态变量中,以便从tiny的内置创建函数中读取它,并将所有数据发送到我的后端.总的来说,我希望当用户 Select 一个文本来创建 comments 时,通过tiny的create函数将突出显示的文本发送到我的后端,但create函数只读取变量的初始状态,而不读取更新的值.代码ID如下:

import { Editor as EditorMce } from "@tinymce/tinymce-react";
//... some imports

function Editor() {
let [highlightedText, setHighlightedText] = useState("");

  const tinycomments_create = (req, done, fail) => {
    const { content, createdAt } = req;

    console.log("highligt inside create function");
    console.log(highlightedText); //This is always an empy string, the initial value
//and does not update when user highlights a text

    fetch("my-backend-endpoint", {
      method: "POST",
      body: JSON.stringify({
        content,
        createdAt,
        highlightedText,
      }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error("Failed to create comment");
        }
        return response.json();
      })
      .then((req2) => {
        const conversationUid = req2.id;
        done({ conversationUid });
      })
      .catch((e) => {
        fail(e);
      });
  };

//... some existing code and I return the component

<EditorMce
                value={session ? session.sessionText : ""}
                onEditorChange={handleOnEditorChange}
                init={{
                  init_instance_callback: (editor) => {
                    editor.on("MouseUp", function (e) {
                      if (e.view.getSelection().toString() !== "") {
                        setHighlightedText(e.view.getSelection().toString());
                      }
                    });
                  },
                  content_css: "writer",
                  height: "80%",
                  width: "95%",
                  plugins: [
                    "tinycomments",
                    "advlist",
                    "autolink",
                    "lists",
                    "link",
                    "image",
                    "charmap",
                    "preview",
                    "anchor",
                    "searchreplace",
                    "visualblocks",
                    "code",
                    "fullscreen",
                    "insertdatetime",
                    "media",
                    "table",
                    "code",
                    "help",
                    "wordcount",
                  ],
                  menubar: "file edit view insert format tools tc",
                  menu: {
                    tc: {
                      title: "Comments",
                      items: "addcomment showcomments deleteallconversations",
                    },
                  },
                  toolbar:
                    "undo redo | fontsizeinput fontfamily | blocks | " +
                    "bold italic forecolor backcolor | alignleft aligncenter " +
                    "alignright alignjustify | bullist numlist outdent indent | " +
                    "removeformat | addcomment showcomments | help",
                  content_style:
                    "body { font-family:Helvetica,Arial,sans-serif; font-size:16px }" +
                    ".tox-comments-visible span.tox-comment  { background-color: #90EE90!important; }.tox-comments-visible span.tox-comment--active { background-color: black; }",
                  tinycomments_create,
                  tinycomments_reply,
                  tinycomments_edit_comment,
                  tinycomments_delete,
                  tinycomments_delete_all,
                  tinycomments_delete_comment,
                  tinycomments_lookup,
                }}
              />
}

如何更新tinyComments_Create内的Highlight tedText的值.我已经try 了Use Callback挂钩,但没有结果.此外,我还try 在useEffect中添加tinyComments_Create,并在每次Highlight tedText更新时设置它,但再次没有结果. 对此有什么 idea 吗?

推荐答案

您可以不使用useState,而使用useRef:

// replace
const [highlightedText, setHighlightedText] = useState("");

// by
const highlightedText = useRef("");

则在更新该值时

// replace
 setHighlightedText(e.view.getSelection().toString());

// by
highlightedText.current = e.view.getSelection().toString();

最后,在tinycomments_create函数中,您可以从highlightedText.current读取最新的值.

请注意,更新ref不会导致渲染,因此UI不会更新.如果你想更新UI,你必须使用useState和建议的useRef方法.

TLDR:使用useRef对于tinycomments_create读取highlightedText的最后一个值是必不可少的;而如果您想要进行渲染和更新UI,使用useState是必不可少的.

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

我的glb文件没有加载到我的three.js文件中

成帧器运动中的运动组件为何以收件箱开始?

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

为什么JPG图像不能在VITE中导入以进行react ?

一个实体一刀VS每个实体多刀S

为什么可选参数的顺序会导致问题?

我想将Sitecore搜索面过滤器从多个转换为单个

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

警告框不显示包含HTML输入字段的总和

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

用于测试其方法和构造函数的导出/导入类

如何在Highlihte.js代码区旁边添加行号?

将延迟加载的模块转换为Eager 加载的模块

JSX/React -如何在组件props 中循环遍历数组

浮动标签效果移除时,所需的也被移除

CSS网格使页面自动滚动

打字脚本中的函数包装键入