React 16使用Jodit Editor点击外部触发event.persist is not a function错误

我在React 16项目中集成Jodit Editor后，各项功能运行正常，但点击编辑器外部时会触发错误：ERROR : event.persist is not a function。起初只是控制台警告，后来变成了阻塞页面的显式错误。我曾尝试在onChange中添加event.persist()，但问题依旧。

RichTextEditor组件代码 #

import React, { useState, useEffect } from "react";
import { InputLabel } from "@material-ui/core";
import LightToolTip from "../LightToolTip";
import JoditEditor from 'jodit-react';


const config = {
  toolbar: true,
  useSplitMode: false,
  showXPathInStatusbar: false,
  showCharsCounter: false,
  showWordsCounter: false,
  showPlaceholder: false,
  showTooltip: true,
  allowShortcut: true,
  allowPaste: true,
  allowPasteImage: false,
  uploader: {
    insertImageAsBase64URI: true,
  },
  disablePlugins: 'paste',
};

const RichTextEditor = ({
  id,
  label,
  fmoId,
  isDefault,
  isAdmin,
  defaultValue,
  textValue,
  resourceId,
  updateParentValue,
  ...props
}) => {
  const [inputVal, setInputVal] = useState(null);

  useEffect(() => {
    setInputVal(textValue || "")
  }, [fmoId, textValue]);

  const updateInputVal = (value) => {
    if (value != null) {
      setInputVal(value);
      updateParentValue(id, value, resourceId, false);
    }
  };

  return (
    <>
      <LightToolTip title={!isAdmin ? "" : `Key: ${id}`}>
        <InputLabel htmlFor={id}>
          {label} 
        </InputLabel>
      </LightToolTip>
      {!isDefault ? (
        <LightToolTip title={`Default: ${defaultValue || "No Default Found"}`}>
          <JoditEditor
            id={id}
            name={id}
            value={inputVal}
            config={config}
            onChange={event => updateInputVal(event)}
          />
        </LightToolTip>
      )
        :
      
          <JoditEditor
            id={id}
            name={id}
            value={inputVal}
            config={config}
            onChange={(value) => updateInputVal(value)}
           
          />
      }
     
    </>
  );
};

export default RichTextEditor;

package.json代码 #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.12",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "bootstrap": "^5.2.3",
    "history": "^4.10.1",
    "html-react-parser": "^3.0.15",
    "jodit-react": "^1.3.39",
    "jquery": "^3.6.4",
    "popper.js": "^1.16.1",
    "react": "^16.13.1",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^16.13.1",
    "react-hook-form": "^5.7.2",
    "react-html-email": "^3.0.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "^5.0.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

LightToolTip组件代码 #

import React from "react";
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';

const LightTooltip = withStyles((theme) => ({
    tooltip: {
      backgroundColor: theme.palette.common.white,
      color: 'rgba(0, 0, 0, 0.87)',
      boxShadow: theme.shadows[1],
      fontSize: 11,
    },
}))(Tooltip);


const LightToolTip = ({children, title}) => {
    return (
        <LightTooltip title={title} placement="bottom-start">
            {children}
        </LightTooltip>
    );
};

export default LightToolTip;

问题原因与修复方案 #

核心原因 #

这个错误是因为Jodit Editor在失焦等场景下传递的并非React合成事件，而是原生事件或直接传递内容值，但代码中错误地将其当作React合成事件处理，触发了仅React合成事件才有的event.persist()调用逻辑。

具体修复步骤 #

1. 统一onChange参数处理
   Jodit React的onChange回调第一个参数是编辑器内容，第二个才是事件对象。你当前两个编辑器实例的onChange处理不一致，导致部分场景下把内容当成事件对象处理。统一修改为：

   // 替换两个JoditEditor的onChange
   onChange={(content) => updateInputVal(content)}
   

2. 升级Jodit React版本
   当前使用的jodit-react@1.3.39存在旧版本事件处理bug，与Material-UI Tooltip交互时会触发异常。升级到兼容React 16的稳定版本：

   npm install jodit-react@^1.3.45 --save
   

3. 移除无效的event.persist()调用
   由于Jodit传递的不是React合成事件，event.persist()完全无效，直接删除相关代码即可。

4. 优化Tooltip条件渲染
   当title为空时，Tooltip仍会触发不必要的事件监听，添加条件渲染避免浪费：

   // 替换标题处的Tooltip
   {isAdmin ? (
     <LightToolTip title={`Key: ${id}`}>
       <InputLabel htmlFor={id}>{label}</InputLabel>
     </LightToolTip>
   ) : (
     <InputLabel htmlFor={id}>{label}</InputLabel>
   )}
   
   // 替换默认值Tooltip
   {!isDefault ? (
     defaultValue ? (
       <LightToolTip title={`Default: ${defaultValue}`}>
         <JoditEditor id={id} name={id} value={inputVal} config={config} onChange={(content) => updateInputVal(content)} />
       </LightToolTip>
     ) : (
       <JoditEditor id={id} name={id} value={inputVal} config={config} onChange={(content) => updateInputVal(content)} />
     )
   ) : (
     <JoditEditor id={id} name={id} value={inputVal} config={config} onChange={(content) => updateInputVal(content)} />
   )}
   

内容的提问来源于stack exchange，提问作者Wasim