reactjs React Draft所见即所得下拉选项不工作

d6kp6zgx 于 2023-01-12 发布在 React

关注(0)|答案(3)|浏览(119)

我在实现React Draft Wysiwyg时遇到问题，字体、大小、粗体和其他下拉选项不起作用
这是我的密码

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>
  )
}

当我点击字体或任何其他下拉菜单时，它显示错误

reactjs

来源：https://stackoverflow.com/questions/70276271/react-draft-wysiwyg-dropdown-options-not-working

3条答案

按热度按时间

1cklez4t1#

我从这个旧剪辑2020找到了解决方案。感谢他。

视频网站：https://www.youtube.com/watch?v=t12a6z090AU&t=760s&ab_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版本了。
所以，快乐编码！

附言。js草稿将于2022年12月31日归档， meta公司将使用词法代替。所以，请记住这一点。https://github.com/facebook/lexical
**附言2.**因为React Draft Wysiwyg是Draft js的一个扩展，它非常好，但是我看到github已经很长一段时间没有活动了。所以请考虑一下你是否会长期使用它。

赞(0）回复(0）举报 2023-01-12

58wvjzkj2#

请尝试 Package setState函数。

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

然后将onSetEditorState作为属性传递给onEditorStateChange

赞(0）回复(0）举报 2023-01-12

c2e8gylq3#

另请检查导致此问题的react strict模式，如下所述：
https://github.com/jpuri/react-draft-wysiwyg/issues/1291#issuecomment-1203348769

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs React Draft所见即所得下拉选项不工作

3条答案

相关问题

热门标签

最新问答