feat: onSbumit 回调参数改为 { text, files }

README.md

@@ -23,7 +23,7 @@ import Comment, { Editor } from 'comment';
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
-| token    | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |
+| token      | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |
 
 
 
@@ -37,13 +37,14 @@ import Comment, { Editor } from 'comment';
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value                        |
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
-| onSubmit      | function(value) |               | false    | 点击提交按钮的回调函数                                                                            |
+| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                           |
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
 | 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
 
@@ -114,6 +115,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();
+}
+
+
+<Comment type={1} businessId="test">
+  <Editor 
+    // 使用 onRef 方法创建一个 Editor 组件的引用，并添加到 this 上面
+    onRef={ref => this.editor = ref } 
+    onSubmit={() => this.handleChangeSubmit()}
+  />
+</Comment>
+```
+
+**注意上面的 `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({ text: value, files }, () => {
-      this.setState({
-        showUpload: false,
-        value: "",
-        fileList: [],
-        fileMap: {}
-      });
+      this.resetState();
+    });
+  }
+
+  resetState() {
+    this.setState({
+      showUpload: false,
+      value: "",
+      fileList: [],
+      fileMap: {}
     });
   }
 

src/index.js

@@ -20,13 +20,14 @@ class Index extends Component {
     console.log("handleChangeValue value: ", value);
   }
 
-  handleChangeSubmit(value) {
+  handleChangeSubmit({ text, files }) {
     this.setState({ loading: true }, () => {
       setTimeout(() => {
         this.setState({ loading: false });
       }, 2000);
     });
-    console.log("submit value: ", value);
+    console.log("submit text: ", text);
+    console.log("submit files: ", files);
   }
 
   render() {