Question

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

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

例如，要在其中创建一个新的编辑器，我按下，然后映射到类似于以下内容的components数组：

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

在调试时，上面的代码段确实调用了“ setState”，并且确实输入了if语句，但是在我的editorState中未设置任何值。

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

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

我希望我已经对此进行了很好的解释，如果没有，请告诉我，很不高兴提供进一步的信息/摘要。

先谢谢您。

Answer 1

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

在我的onEditorStateChange（）内部，我使用初始传入的参数（e）更新值。使用draftToHtml，将其转换为raw并将其传递到设置状态，如下所示：

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

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

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

1 个答案: