当使用MUIRichTextEditor作为redux表单时,字段光标一直返回到开始位置

v440hwme  于 2023-06-30  发布在  其他
关注(0)|答案(1)|浏览(128)

当使用MUIRichTextEditor作为redux表单字段时,每次击键,redux都会更新存储,然后调用我的组件渲染函数。我想设置MUIRichTextEditor组件的新值,为此我使用了文档中的prop defaultValue。问题是它的类型是Draft.Model.Encoding.RawDraftContentState,根据我的理解,这意味着我没有办法设置光标位置。如果我能够将一个新的EditorState对象设置为组件的值,它可能会对我有所帮助,但我无法找到这样做的方法。下面是一个相关的代码片段:

class MYRichText extends Component {
    lastRichTextHTMLValue = null;

    constructor(props) {
        super(props);
    }

    onRichTextChange = (state) => {
    // avoid infinite loop - do not call redux unless the value changed
        const richTextAsHTML = stateToHTML(state.getCurrentContent());
        if (this.lastRichTextHTMLValue || this.lastRichTextHTMLValue !== richTextAsHTML) {
            this.lastRichTextHTMLValue = richTextAsHTML;
            this.props.input.onChange(richTextAsHTML);
        }
    };

    render() {
        const htmlValue = this.props.input.value ? this.props.input.value : "<p><br></p>";
        const convertedValue = convertFromHTML(htmlValue);
        const valueAsContentState = ContentState.createFromBlockArray(
            convertedValue.contentBlocks,
            convertedValue.entityMap
        );
        const defaultValue = JSON.stringify(convertToRaw(valueAsContentState));

        return (
            <MuiThemeProvider theme={richEditorTheme}>
                <MUIRichTextEditor
                    controls={["title", "bold", "italic", "underline", "strikethrough"]}
                    label="Description"
                    defaultValue={defaultValue}
                    onChange={this.onRichTextChange}
                />
            </MuiThemeProvider>
        );
    }
}
ugmeyewa

ugmeyewa1#

我最终做的是使用MUIRichTextEditor作为不受控制的组件。这意味着不通知redux编辑器中的任何更改,然后在提交时从组件中获取编辑器值,而不是从redux表单字段中获取。如果提交是在一个HOC中处理的,而您无权访问编辑器的值,则可以使用onChange处理程序来更新HOC中的值更改。具体如下:

onRichTextChange = (state) => {
             ...
             this.props.updateHOC(newValue); 

          };

其中updateHOC是HOC通过props提供给组件的参数

相关问题