diff --git a/examples/controllered.js b/examples/controllered.js index 1c687f4..f5de17a 100644 --- a/examples/controllered.js +++ b/examples/controllered.js @@ -48,8 +48,8 @@ class Editor extends React.Component { plugins={plugins} toolbars={toolbars} onKeyDown={(ev) => keyDown(ev)} - onChange={this.editorChange} - value={this.state.value} + onChange={() => {}} + value={''} /> ); } diff --git a/package.json b/package.json index 9934f2c..add864b 100644 --- a/package.json +++ b/package.json @@ -56,10 +56,10 @@ }, "dependencies": { "draft-js": "^0.10.0", - "fbjs": "^0.8.9", "immutable": "^3.7.4", "lodash": "^4.16.5", - "prop-types": "^15.5.8" + "prop-types": "^15.5.8", + "setimmediate": "^1.0.5" }, "pre-commit": [ "lint" diff --git a/src/EditorCore/index.tsx b/src/EditorCore/index.tsx index 25844c9..cb56cd3 100644 --- a/src/EditorCore/index.tsx +++ b/src/EditorCore/index.tsx @@ -16,7 +16,7 @@ import { } from 'draft-js'; import { List, Map } from 'immutable'; -import setImmediate from 'fbjs/lib/setImmediate'; +import 'setimmediate'; import { createToolbar } from '../Toolbar'; import ConfigStore from './ConfigStore'; import GetHTML from './export/getHTML'; @@ -112,6 +112,7 @@ class EditorCore extends React.Component { private plugins: any; private controlledMode: boolean; private _editorWrapper: Element; + private forceUpdateImmediate: number; constructor(props: EditorProps) { super(props); @@ -256,6 +257,9 @@ class EditorCore extends React.Component { } public componentWillReceiveProps(nextProps) { + if (this.forceUpdateImmediate) { + this.cancelForceUpdateImmediate(); + } if (this.controlledMode) { const decorators = nextProps.value.getDecorator(); @@ -269,6 +273,14 @@ class EditorCore extends React.Component { }); } } + public componentWillUnmount() { + this.cancelForceUpdateImmediate(); + } + + private cancelForceUpdateImmediate = () => { + clearImmediate(this.forceUpdateImmediate); + this.forceUpdateImmediate = null; + } // 处理 value  generatorDefaultValue(editorState: EditorState): EditorState { const { defaultValue } = this.props; @@ -358,6 +370,18 @@ class EditorCore extends React.Component { if (this.props.onChange) { this.props.onChange(newEditorState); + + // close this issue https://github.com/ant-design/ant-design/issues/5788 + // when onChange not take any effect + // `` won't rerender cause no props is changed. + // add an timeout here, + // if props.onChange not trigger componentWillReceiveProps, + // we will force render Editor with previous editorState, + if (this.controlledMode) { + this.forceUpdateImmediate = setImmediate(() => this.setState({ + editorState: new EditorState(this.state.editorState.getImmutable()), + })); + } } if (!this.controlledMode) {