从动态创建的编辑器中响应草稿所见即所得更新编辑器状态

我目前正在研究一个涉及使用多个WYSIWYG编辑器的项目。我以前用过 反作用吃水 在同一个项目中,但始终与静态元素一起使用,例如,每个编辑器都是固定的。

在我的例子中,编辑器是动态创建的(最少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语句,但在我的editorState中没有设置任何值。

我很高兴有其他的建议方法,只要这可以与动态渲染的组件一起使用。

我需要设置这个值,因为我将转换为HTML/string并使用内容保存到数据库。

我希望我已经很好地解释了这一点,如果没有,请告诉我,我很乐意提供进一步的信息/片段。

提前谢谢。