Merge branch 'fix/resetEditorState' of node/npmcomment into master

README.md

@@ -42,7 +42,8 @@ import Comment, { Editor } from 'comment';
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
 | button        | ReactNode       |               | false    | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮 |
 | emojiToolIcon | ReactNode       |               | false    | Toolbar 中表情的图标                                                                              |
-| imageToolIcon | ReactNode       |               | false    | Toolbar 中上传文件的图标                                                                          |
+| imageToolIcon | ReactNode       |               | false    | Toolbar 中上传文件的图标                                                     |
+| onRef      | function |                                   | false    | 传递子组件的引用                       |
 
 ### 什么时候不要使用 value/onChange/onSubmit
 
@@ -113,6 +114,34 @@ import Comment, { Editor } from 'comment';
 </Comment>
 ```
 
+### onRef
+
+如果你需要在父组件里面调用子组件的方法，就可以使用 `onRef`。主要是用于调用 Editor 组件内部的 `resetState` 方法。
+
+如果你需要在父组件里面，手动清空 Editor 里面的数据，则可以使用 `resetState`。因为即使父组件传入了 `value`， Editor 内部也会保存一份 `value` 的值，用于 `onSubmit` 回调将值传递给父组件。所以可能存在，当子组件值没有清除，而父组件的 `value` 为空的情况，导致编辑器中文字和实际预想的不一致。所以当在父组件里面使用了 `value` 并重置 `value` 的时候，最好清空 Editor 的 state。
+
+具体使用方式如下：
+
+
+```jsx
+
+handleChangeSubmit() {
+  // 点击按钮，调用 onSubmit 的时候，清空 Editor 的数据
+  this.editor.resetState();
+}
+
+
+<App type={1} businessId="test">
+  <Editor 
+    // 使用 onRef 方法创建一个 Editor 组件的引用，并添加到 this 上面
+    onRef={ref => this.editor = ref } 
+    onSubmit={() => this.handleChangeSubmit()}
+  />
+</App>
+```
+
+**注意上面的 `onRef={ref => this.editor = ref }`**，这是实现父组件调用子组件方法的关键。**
+
 
 ## 使用
 

src/components/Editor/index.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input } from "antd";
 import { OSS_LINK } from "../../constant";
 import { MAX_UPLOAD_NUMBER } from "../../constant";
+import { isFunction } from "../../helper";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
 import "./index.css";
@@ -25,9 +26,14 @@ class Editor extends React.Component {
     this.handleShowUpload = this.handleShowUpload.bind(this);
     this.handleUpload = this.handleUpload.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.resetState = this.resetState.bind(this);
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    if (isFunction(this.props.onRef)) {
+      this.props.onRef(this);
+    }
+  }
 
   /**
    * 编辑器的值改变事件
@@ -98,12 +104,16 @@ class Editor extends React.Component {
       });
     }
     this.props.onSubmit(value, () => {
-      this.setState({
-        showUpload: false,
-        value: "",
-        fileList: [],
-        fileMap: {}
-      });
+      this.resetState();
+    });
+  }
+
+  resetState() {
+    this.setState({
+      showUpload: false,
+      value: "",
+      fileList: [],
+      fileMap: {}
     });
   }