javascript - 反应草稿所见即所得 - 清除 editorState 后无法在编辑器中输入文本
问题描述
在使用编辑器完成某些操作后,我正在尝试重置编辑器内容react-draft-wysiwyg
。使用clearEditorContent
from 方法清除所有内容draftjs-utils
。但是在清除内容后,我无法在编辑器中输入任何内容。添加了下面的代码。请帮助解决这个问题。
import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { clearEditorContent } from 'draftjs-utils'
import { Editor } from 'react-draft-wysiwyg';
import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
export default class RTEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
this.setDomEditorRef = ref => this.domEditor = ref;
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
}, () => {
this.props.sendResult(draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())));
});
};
componentWillReceiveProps(nextProps) {
if(nextProps.reset) {
this.reset();
}
}
componentDidMount() {
if(this.props.text) {
const html = `${this.props.text}`;
const contentBlock = htmlToDraft(html);
if (contentBlock) {
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
this.setState({ editorState, });
}
}
this.domEditor.focusEditor();
}
reset = () => {
let {editorState} = this.state;
editorState = clearEditorContent(editorState);
this.setState({ editorState });
};
render() {
const { editorState } = this.state;
return (
<Editor
ref={this.setDomEditorRef}
editorState={editorState}
wrapperClassName="rte-wrapper"
editorClassName="rte-editor"
onEditorStateChange={this.onEditorStateChange}
toolbarCustomButtons={[this.props.UploadHandler]}
/>
)
}
}
我的父组件代码如下,
import React, { Component } from 'react'
import { addThreadPost } from '../../../api/thread-api'
import { isEmpty } from '../../../api/common-api'
import RTEditor from './Loadable'
export default class ThreadActivity extends Component {
constructor(props) {
super(props)
this.state = {
clearEditor: false,
threadPost: ''
}
}
setPost = (post) => {
this.setState({ threadPost: post })
}
addThreadPost = () => {
let postText = this.state.threadPost.replace(/<[^>]+>/g, '');
if(!isEmpty(postText)) {
addThreadPost(this.props.match.params.id_thread, this.state.threadPost, this.state.postAttachments).then(response => {
this.setState({
clearEditor: true,
postAttachments: [],
})
});
}
else {
alert("Please enter some text in box.");
}
}
render() {
return [
<div className="commentbox-container">
<div className="form-group">
<div className="form-control">
<RTEditor
ref={node => { this.threadPost = node }}
text={""}
sendResult={this.setPost.bind(this)}
reset={this.state.clearEditor}
/>
<button className="btn-add-post" onClick={this.addThreadPost}>Add Post</button>
</div>
</div>
</div>
]
}
}
解决方案
您的问题可能是,一旦将ThreadActivity
'设置state.clearEditor
为true
,就永远不会将其设置回 false。所以this.reset()
每次组件收到道具时都会调用你的。顺便说一句,每次您尝试键入时都会出现这种情况,因为您正在调用this.props.sendResult
.
最简单的解决方法是确保state.clearEditor
在清除完成后更改回 false。
添加到 ThreadActivity.js:
constructor(props) {
...
this.completeClear = this.completeClear.bind(this);
}
...
completeClear = () => {
this.setState({clearEditor: false});
}
render() {
...
<RTEditor
...
completeClear={this.completeClear}
/>
...
}
在 RTEditor.js 中:
reset = () => {
let {editorState} = this.state;
editorState = clearEditorContent(editorState);
this.setState({ editorState });
this.props.completeClear();
};
推荐阅读
- c# - 未调用模拟抽象类的受保护虚拟方法
- genexus - For Each 不起作用,只是转到第一个元素然后退出,我该如何解决这个问题?
- regex - 在 Vim 中,如何区分换行符 `\n` 和 input() 函数返回的空值?
- c - 如何在 C 中创建一个“等待”x 秒的函数?
- sql - SQL - 根据特定条件从下一行获取值
- sql - 从客户的订单中查找被拒绝的商品
- angular - 如何在 Nativescript 中使用图表 UI
- javascript - 使用变量画线(画布)
- jmeter - 我们能否通过 jmeter 模拟电子商务应用程序的实时流量,用户在每个步骤中下降
- python - 开发一个新包并得到 ModuleNotFoundError: No module named