react-draft-wysiwyg 从动态创建的编辑器更新编辑器状态答案

【问题标题】：react-draft-wysiwyg update editorstate from dynamically created editorreact-draft-wysiwyg 从动态创建的编辑器更新编辑器状态
【发布时间】：2018-08-28 09:53:22
【问题描述】：

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

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

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

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

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

通常更新单个编辑器 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

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})
}

调试时，上面的 sn-p 中确实调用了“setState”，它确实进入了 if 语句，但我的 editorState 中没有设置任何值。

我很高兴提出替代方法，只要这适用于动态呈现的组件。

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

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

提前谢谢你。

【问题讨论】：

标签： javascript reactjs ecmascript-6 draftjs

【解决方案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 值，我现在可以将它转换为字符串并保存到数据库中。

希望这可以帮助遇到同样问题的其他人:)

【讨论】：