对Wysiwyg下拉选项草案作出反应

Question

当实现反应所见即所得草案、字体、大小、粗体和其他下拉选项不起作用时，我面临问题

这是我的密码

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


export const HTMLEditor: React.FC = (): JSX.Element => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty())


return (
    <div className="mt-2 mb-2">
      <Editor
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbar={{
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
        }}
      />
    </div>
  )
}

​

​

当我单击字体或任何其他下拉列表时，它会显示错误。

Answer 1

我从2020年这个老片段中找到了解决方案。感谢他。

youtube: channel=CodingShiksha

回购github: https://github.com/gauti123456/ReactWysiwygEditor

执行以下步骤：

1. 在src/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")
);

我不知道这意味着什么，但如果我不做这一步，这是行不通的，任何人都可以解释。我会非常感激的。

更多信息

所以我一天一夜都在努力找出这个编辑出了什么问题，我无法按下它，我觉得它似乎是下垂的。因此，react和react dom的版本与这个问题无关，CSS版本也是如此.

那么，快乐编码！

Ps.草稿js将在2022年12月31日中成为存档，而元公司将使用词法。所以，记住这一点。https://github.com/facebook/lexical

Ps2.用于响应草案Wysiwyg的是草案js的扩展，它非常好，但是我看到github已经很长一段时间不再活跃了。所以请考虑一下你是否会长期使用这个。

Answer 2

请尝试包装您的setState函数。

const onSetEditorState = (newState) => {
   setEditorState(newState)
}

然后将onSetEditorState作为道具传递给onEditorStateChange