javascript - 我来自后端的套接字连接在反应应用程序的渲染内容中产生问题

Question

当我尝试制作实时文本编辑器时，我的套接字连接来自节点服务器，我正在使用JoditEditor富文本编辑器，因为问题是每当我尝试在编辑器中输入多个单词时，我的光标都会重置，我必须如果我可以连续在编辑器上书写，请再次单击编辑器以根据需要写下一个单词

import React, { useState, useRef, useEffect } from "react";
import JoditEditor from "jodit-react";
import { socket } from "../socketConfig";

function Msg(props) {
  const editor = useRef(null);
  const [message, setmessage] = useState(props.message);
  const [roomid, setroomid] = useState(props.roomid);
  const [sid, setsid] = useState([]);

  const configEditor = { readonly: false };

  const handleChange = (data) => {
    //sending message to above room
    socket.send(data, "ankit", roomid);
    socket.on("message", (data) => {
      console.log(data); 
      setmessage(data);
    });
    
  };

  useEffect(() => {

    //geting socket id for new user
    socket.on("newuser", (data) => {
      setsid(data);
      console.log("UC");
    });

  }, [message, roomid]);

  return (
    <>
      <h5>{message}</h5>
      <JoditEditor
        ref={editor}
        value={message}
        config={configEditor}
        tabIndex={1}
        onChange={handleChange}
      />
    </>
  );
}

export { Msg };

标签： javascriptnode.jsreactjs