javascript - React setState 不影响 Children

Question

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

点击之前: 点击清除后:

Answer 1

根据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('');