React-draft-wysiwyg 从动态创建的编辑器更新编辑器状态

Question

我目前正在做一个涉及使用多个所见即所得编辑器的项目。我以前在同一个项目中使用过react-draft，但一直与静态元素一起使用，例如，每个编辑器都是固定的。

就我而言，我的编辑器是动态创建的，(最少 1 个，最多 15 个(编辑器。我每次都使用 map(( 和构造对象将它们渲染到我的容器中。允许用户单击 + 或 - 按钮来创建/删除编辑器。

例如，要创建一个新的编辑器，我按下然后映射到组件数组，如下所示：

components: [
{
id:1, 
type: 'default',
contentValue: [
title: 'content-block',
value: null,
editorState: EditorState.CreateEmpty(),
]
}
]

我能够很好地渲染多个编辑器并创建空的编辑器。我的问题是当我尝试更新内容编辑器状态时。

通常要更新单个编辑器 ID，请使用：

onEditorStateChange = editorState => {
this.setState({
editorstate,
})
}

但是，鉴于我的编辑器是动态渲染的，我将编辑器状态隔离在"组件"数组中。所以我尝试了以下不起作用的方法：

在渲染中

this.state.components.map((obj) => {
return (
<Editor
editorState={obj.contentValue.editorState}
onEditorStateChange={(e) => this.onEditorStateChange(e, obj.id)}
/>
);
}

在编辑器状态更改

onEditorStateChange(e, id){
const { components } = this.state;
const x = { components };
for (const i in x){
if(x[i].id ==== id){
x[i].contentValue.editorState = e;
}
}
this.setState({components: x})
}

调试时，"setState"确实在上面的代码片段中被调用，并且它确实输入了 if 语句，但在我的编辑器状态中没有设置任何值。

我很高兴提出其他方法的建议，只要这适用于动态渲染的组件。

我需要设置此值，因为我将转换为HTML/字符串并使用内容保存到数据库。

我希望我已经很好地解释了这一点，如果没有，请告诉我，并且很乐意提供更多信息/片段。

提前谢谢你。

Answer 1

好的，我想出了一个解决方案。

在我的 onEditorStateChange(( 中，我使用最初传入的参数 (e( 更新值。使用 draftToHtml，我将其转换为原始并将其传递给设置状态，如下所示：

onEditorStateChange(e, id) {
const { components } = this.state;
console.log(e);
const x = components;
for (const i in x) {
if (x[i].id === id) {
x[i].contentValue.editorState = e;
x[i].value = draftToHtml(convertToRaw(e.getCurrentContent()));
//console.log(x[i]);
}
}
this.setState({    
components: x,
});
}

这给了我一个 HTML 值，我现在可以将其转换为字符串并保存到数据库中。

希望这有助于其他人解决同样的问题:)