反应草稿所见即所得下拉不工作问题答案

【问题标题】：React draft wysiwyg dropdown not working problem反应草稿所见即所得下拉不工作问题
【发布时间】：2022-11-07 18:44:25
【问题描述】：

编辑器正在工作，但下拉菜单不起作用，

import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';


const MyEditor = () => {

  let editorState = EditorState.createEmpty();

  const [description, setDescription] = useState(editorState);

  const onEditorStateChange = (editorState) => {
    setDescription(editorState);
  };

  return (
    <div>
      <Editor
        editorState={description}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
      />
    </div>
  );
};

export default MyEditor;

单击下拉菜单时，它会在控制台中显示以下警告

Console image

【问题讨论】：

标签： javascript reactjs draftjs react-draft-wysiwyg

【解决方案1】：

改变你的 index.js

从

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

至

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom";                 // add this

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

【讨论】：