Draft.js 标头未正确呈现

编程问答 2022-05-12

问题描述

我有一个安装了顺风的 next.js 环境和一个简单的 Draft.js 文本编辑器。在我的工具栏组件中，我切换内联样式和块样式。一切正常，除了当我将块类型设置为标题一、标题二等时，没有任何内容呈现。我记录了编辑器状态，并且块类型已正确设置为块，但没有任何反应。疯狂的是，它适用于 unordered-list-item 和ordered-list-item。

为了简单起见，我添加了一个应该可以工作但没有的测试按钮。非常感谢任何让我走上正轨的帮助！

export default function TextEditor({data}) {
    const [blockData,setBlockData] = React.useState(data)  
    const rawContent = data.textBlockText
    const [editorState,setEditorState] = React.useState(
        () => rawContent? EditorState.createWithContent(convertFromraw(JSON.parse(rawContent))) :  EditorState.createEmpty(),);

    const handleFormatChange = (event) =>{
        setEditorState(RichUtils.toggleBlockType(editorState,"header-one"))
    }

    return (
        <div className="h-full">
            <div className="w-full py-4 flex flex-row px-8">
                <Toolbar editorState={ editorState } setEditorState={ setEditorState } />
            </div>

            <div className="w-full p-4 border-gray-500 border-2 mt-10 lg:w-1/2 lg:mx-auto">
                <Editor
                    editorState = {editorState}
                    onChange = {setEditorState}
                />
            </div>
            <button onClick={e => handleFormatChange ("header-one")}>Test Button</button>
        </div>
    )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

draftjsreactjsreactjsreactjsreactjs