当使用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>
);
}
}
1条答案
按热度按时间ugmeyewa1#
我最终做的是使用MUIRichTextEditor作为不受控制的组件。这意味着不通知redux编辑器中的任何更改,然后在提交时从组件中获取编辑器值,而不是从redux表单字段中获取。如果提交是在一个HOC中处理的,而您无权访问编辑器的值,则可以使用onChange处理程序来更新HOC中的值更改。具体如下:
其中updateHOC是HOC通过props提供给组件的参数