React setState不影响Children(React setState not affecting Children)

我使用CKEditor对于一个简单的邮件表单，看起来像这样：

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字段的内部保持不变。

点击之前： 点击CLEAR后：

I use CKEditor For a simple mail form in react, which looks like this:

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

The problem is, that although setState is called correctly - both this.title and this.CKEditorContent have their values reset, BUT the internals of CKeditor field remain unchanged.

before click: after click CLEAR:

最满意答案

根据这个问题，你需要使用CKEditor的setData方法来操纵输入的状态。

所以在你的情况下，解决方法是修改代码，如下所示：

<CKEditor activeClass="p10" content={this.state.CKEditorContent} events={{ change: this.updateContent, }} ref={(instance) => { this.ckeditor = instance; }} />

然后在你的clearText()函数中调用它就像这样：

this.ckeditor.editorInstance.setData('');

According to this issue you need to use CKEditor's setData method to manipulate the state of the input.

So in your case the workaround would be to modify the code like so:

<CKEditor activeClass="p10" content={this.state.CKEditorContent} events={{ change: this.updateContent, }} ref={(instance) => { this.ckeditor = instance; }} />

And then in your clearText() function just call it like this:

this.ckeditor.editorInstance.setData('');

React setState不影响Children(React setState not affecting Children)

我使用CKEditor对于一个简单的邮件表单，看起来像这样：

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字段的内部保持不变。

点击之前： 点击CLEAR后：

I use CKEditor For a simple mail form in react, which looks like this:

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

The problem is, that although setState is called correctly - both this.title and this.CKEditorContent have their values reset, BUT the internals of CKeditor field remain unchanged.

before click: after click CLEAR:

最满意答案

根据这个问题，你需要使用CKEditor的setData方法来操纵输入的状态。

所以在你的情况下，解决方法是修改代码，如下所示：

<CKEditor activeClass="p10" content={this.state.CKEditorContent} events={{ change: this.updateContent, }} ref={(instance) => { this.ckeditor = instance; }} />

然后在你的clearText()函数中调用它就像这样：

this.ckeditor.editorInstance.setData('');

According to this issue you need to use CKEditor's setData method to manipulate the state of the input.

So in your case the workaround would be to modify the code like so:

<CKEditor activeClass="p10" content={this.state.CKEditorContent} events={{ change: this.updateContent, }} ref={(instance) => { this.ckeditor = instance; }} />

And then in your clearText() function just call it like this:

this.ckeditor.editorInstance.setData('');