Przeglądaj źródła

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

node 6 lat temu
rodzic
commit
ba6193f023
3 zmienionych plików z 52 dodań i 12 usunięć
  1. 32
    3
      README.md
  2. 17
    7
      src/components/Editor/index.js
  3. 3
    2
      src/index.js

+ 32
- 3
README.md Wyświetl plik

@@ -23,7 +23,7 @@ import Comment, { Editor } from 'comment';
23 23
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
24 24
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
25 25
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
26
-| token    | string  |                                    | false    |  [deprecate] token,用于身份认证,非必须。默认使用 cookie |
26
+| token      | string  |                                    | false    |  [deprecate] token,用于身份认证,非必须。默认使用 cookie |
27 27
 
28 28
 
29 29
 
@@ -37,13 +37,14 @@ import Comment, { Editor } from 'comment';
37 37
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
38 38
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
39 39
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
40
-| onSubmit      | function(value) |               | false    | 点击提交按钮的回调函数                                                                            |
40
+| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表                           |
41 41
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
42 42
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
43 43
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
44 44
 | button        | ReactNode       |               | false    | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮 |
45 45
 | emojiToolIcon | ReactNode       |               | false    | Toolbar 中表情的图标                                                                              |
46
-| imageToolIcon | ReactNode       |               | false    | Toolbar 中上传文件的图标                                                                          |
46
+| imageToolIcon | ReactNode       |               | false    | Toolbar 中上传文件的图标                                                     |
47
+| onRef      | function |                                   | false    | 传递子组件的引用                       |
47 48
 
48 49
 ### 什么时候不要使用 value/onChange/onSubmit
49 50
 
@@ -114,6 +115,34 @@ import Comment, { Editor } from 'comment';
114 115
 </Comment>
115 116
 ```
116 117
 
118
+### onRef
119
+
120
+如果你需要在父组件里面调用子组件的方法,就可以使用 `onRef`。主要是用于调用 Editor 组件内部的 `resetState` 方法。
121
+
122
+如果你需要在父组件里面,手动清空 Editor 里面的数据,则可以使用 `resetState`。因为即使父组件传入了 `value`, Editor 内部也会保存一份 `value` 的值,用于 `onSubmit` 回调将值传递给父组件。所以可能存在,当子组件值没有清除,而父组件的 `value` 为空的情况,导致编辑器中文字和实际预想的不一致。所以当在父组件里面使用了 `value` 并重置 `value` 的时候,最好清空 Editor 的 state。
123
+
124
+具体使用方式如下:
125
+
126
+
127
+```jsx
128
+
129
+handleChangeSubmit() {
130
+  // 点击按钮,调用 onSubmit 的时候,清空 Editor 的数据
131
+  this.editor.resetState();
132
+}
133
+
134
+
135
+<Comment type={1} businessId="test">
136
+  <Editor 
137
+    // 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
138
+    onRef={ref => this.editor = ref } 
139
+    onSubmit={() => this.handleChangeSubmit()}
140
+  />
141
+</Comment>
142
+```
143
+
144
+**注意上面的 `onRef={ref => this.editor = ref }`**,这是实现父组件调用子组件方法的关键。**
145
+
117 146
 
118 147
 ## 使用
119 148
 

+ 17
- 7
src/components/Editor/index.js Wyświetl plik

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
3 3
 import { Icon, Button, Popover, Input } from "antd";
4 4
 import { OSS_LINK } from "../../constant";
5 5
 import { MAX_UPLOAD_NUMBER } from "../../constant";
6
+import { isFunction } from "../../helper";
6 7
 import Upload from "./Upload";
7 8
 import Emoji from "./Emoji";
8 9
 import "./index.css";
@@ -25,9 +26,14 @@ class Editor extends React.Component {
25 26
     this.handleShowUpload = this.handleShowUpload.bind(this);
26 27
     this.handleUpload = this.handleUpload.bind(this);
27 28
     this.handleSubmit = this.handleSubmit.bind(this);
29
+    this.resetState = this.resetState.bind(this);
28 30
   }
29 31
 
30
-  componentDidMount() {}
32
+  componentDidMount() {
33
+    if (isFunction(this.props.onRef)) {
34
+      this.props.onRef(this);
35
+    }
36
+  }
31 37
 
32 38
   /**
33 39
    * 编辑器的值改变事件
@@ -98,12 +104,16 @@ class Editor extends React.Component {
98 104
       });
99 105
     }
100 106
     this.props.onSubmit({ text: value, files }, () => {
101
-      this.setState({
102
-        showUpload: false,
103
-        value: "",
104
-        fileList: [],
105
-        fileMap: {}
106
-      });
107
+      this.resetState();
108
+    });
109
+  }
110
+
111
+  resetState() {
112
+    this.setState({
113
+      showUpload: false,
114
+      value: "",
115
+      fileList: [],
116
+      fileMap: {}
107 117
     });
108 118
   }
109 119
 

+ 3
- 2
src/index.js Wyświetl plik

@@ -20,13 +20,14 @@ class Index extends Component {
20 20
     console.log("handleChangeValue value: ", value);
21 21
   }
22 22
 
23
-  handleChangeSubmit(value) {
23
+  handleChangeSubmit({ text, files }) {
24 24
     this.setState({ loading: true }, () => {
25 25
       setTimeout(() => {
26 26
         this.setState({ loading: false });
27 27
       }, 2000);
28 28
     });
29
-    console.log("submit value: ", value);
29
+    console.log("submit text: ", text);
30
+    console.log("submit files: ", files);
30 31
   }
31 32
 
32 33
   render() {