在DraftJS编辑器中,要在状态改变时改变初始内容,可以通过以下步骤实现:
下面是一个示例代码:
import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(), // 初始化编辑器的初始内容为空
initialContent: '这是初始内容', // 初始内容
};
}
componentDidMount() {
// 在组件挂载后,将初始内容设置为编辑器的初始内容
this.setState({
editorState: EditorState.createWithContent(
ContentState.createFromText(this.state.initialContent)
),
});
}
handleChange = (editorState) => {
// 监听编辑器状态的改变
this.setState({ editorState });
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.handleChange}
/>
);
}
}
export default MyEditor;
在上述示例中,我们通过在组件的构造函数中初始化编辑器的初始内容,并在组件挂载后将其设置为编辑器的初始状态。然后,我们通过监听编辑器状态的改变,更新组件的状态,从而实现在状态改变时改变DraftJS编辑器的初始内容。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云