react动态增加state_react-draft-wysiwyg从动态创建的编辑器更新editorstate

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

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

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

components: [

{

id:1,

type: 'default',

contentValue: [

title: 'content-block',

value: null,

editorState: EditorState.CreateEmpty(),

]

}

]

我可以很好地渲染多个编辑器和createEmpty ediorstates . 我的问题是当我尝试更新内容编辑器状态时 .

通常更新单个编辑器id使用:

onEditorStateChange = editorState => {

this.setState({

editorstate,

})

}

但是,鉴于我的编辑器是动态呈现的,我将编辑器状态隔离在“Components”数组中 . 所以我尝试了以下哪些不起作用:

In Render

this.state.components.map((obj) => {

return (

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 /字符串并使用内容保存到数据库 .

我希望我已经解释得很好,如果不是,请让我知道并且很乐意提供进一步的信息/片段 .

先感谢您 .

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值