|
@@ -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
|
|