reactjs 在React JS中使用react-draft-wysiwyg时，下拉菜单不起作用

r3i60tvu 于 2023-01-12 发布在 React

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

我尝试使用react-draft-wysiwyg使用docs
某些图标显示但不起作用：block type、font、font size、pickerColor（下拉框不起作用），比如font size默认设置为16，但我无法更改......

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

const TabContent = ({ name, typeProof }) => {
  const [text, setText] = useState(
  () => EditorState.createEmpty(),);

  return (
    <>
      <SafeAreaView>
        <Editor
          editorState={text}
          onEditorStateChange={setText}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          toolbarClassName="toolbarClassName"
          placeholder="Enter your text here:"
          style={{
           //some styles
          }}
          toolbar={{
            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'],
            inline: { inDropdown: true },
            blockType: { inDropdown: true },
            fontSize: { inDropdown: true },
            fontFamily: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            colorPicker: { inDropdown: true },
            embedded: { inDropdown: true },
            remove: { inDropdown: true },
            history: { inDropdown: true },
         }}
        />
      </SafeAreaView>     
    </>
  );
};

export default function Tabs({ data }) {
  return (
    <TabsComponent forceRenderTabPanel>
      <TabList>
        {data.map(({ name }, i) => (
          <Tab key={name}>Question {i + 1}</Tab>
        ))}
      </TabList>
      {data.map(({ name, typeProof }) => (
        <TabPanel key={name}>
          <TabContent {...{ name, typeProof }} />
        </TabPanel>
      ))}
    </TabsComponent>
  );
}

reactjs

来源：https://stackoverflow.com/questions/72058578/dropdowns-are-not-working-using-react-draft-wysiwyg-in-react-js

3条答案

按热度按时间

o2gm4chl1#

这很奇怪，我无法解释，但我只在index.js中进行了更改：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

签署人：

import "./index.css";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

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

有什么解释吗？我很高兴能理解...

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

uidvcgyl2#

尝试将代码替换为以下示例SandboxExample
我认为您的沙盒依赖项配置也不好，我发现了类似的问题，我创建了一个新的沙盒，添加了依赖项react-draft-wysiwyg和draft-js，导入编辑器并在应用程序组件中使用它，就像您在文件中使用它一样，一切正常，尝试清除您的应用程序，阅读此npx Create React APP
x1c 0d1x My Sandbox example这是我的沙盒示例，包含功能组件
希望这对你有帮助