浏览代码

feat: 为 Editor 添加 resetState 方法

node 6 年前
父节点
当前提交
aa303310df
共有 2 个文件被更改,包括 47 次插入8 次删除
  1. 30
    1
      README.md
  2. 17
    7
      src/components/Editor/index.js

+ 30
- 1
README.md 查看文件

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

+ 17
- 7
src/components/Editor/index.js 查看文件

@@ -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(value, () => {
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