我使用 CKEditor 对于 React 中的简单邮件表单,如下所示:
class SimpleForm extends Component{
constructor() {
super();
this.updateContent = this.updateContent.bind(this);
this.state = {
title: "MyTitle",
CKEditorContent: 'text here',
newMail: false,
}
this.baseState = Object.assign({}, this.state, {newMail: true});
}
}
updateContent(newContent) {
console.log(newContent);
this.setState({
CKEditorContent: newContent.editor.getData(),
})}
clearText(){
this.setState(this.baseState);
}
render() {
return (
<div>
<CKEditor
activeClass="p10"
content={this.state.CKEditorContent}
events={{
"change": this.updateContent
}}
/>
<Button
type="submit"
label="clear"
secondary={true}
onClick={this.clearText.bind(this)}
/>
</div>
);
}
}
问题是,虽然 setState 被正确调用 - this.title 和 this.CKEditorContent 的值都被重置,但 CKeditor 字段的内部保持不变。
最佳答案
根据this issue您需要使用CKEditor的setData
方法来操作输入的状态。
因此,在您的情况下,解决方法是修改代码,如下所示:
<CKEditor
activeClass="p10"
content={this.state.CKEditorContent}
events={{
change: this.updateContent,
}}
ref={(instance) => { this.ckeditor = instance; }}
/>
然后在您的 clearText()
函数中像这样调用它:
this.ckeditor.editorInstance.setData('');
关于javascript - React setState 不影响 Children,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47873379/