集成
集成方法见：http://www.jianshu.com/p/d5d5ee66e733 ，这篇文章讲的很详细
交互
实例1：及时反馈输入
实现：
原理：
在ue组件中创建监听selectionchange事件，并且在事件中调用从父组件继承的回调函数，来及时响应到父组件中。
1.Ue组件：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { Component, PropTypes } from 'react';
class Ueditor extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.editor = this.initEditor()
}
componentWillUnmount() {
// 组件卸载后，清除放入库的id
UE.delEditor(this.props.id);
}
changeContent(text) {
this.editor.setContent(text || '');
}
initEditor() {
const id = this.props.id;
const ueEditor = UE.getEditor(this.props.id, { /*这里是配置*/ });
const self = this;
ueEditor.ready((ueditor) => {
if (!ueditor) {
UE.delEditor(id);
self.initEditor();
}
});
//监听用户输入，用于及时及时反馈，事件中调用父组件的callback回调函数
let me = this;
ueEditor.addListener('selectionchange', function(type) {
me.props.callback(this.getContent());
});
return ueEditor;
}
render() {
return (
<div id={this.props.id} name="content" type="text/plain"></div>
)
}
}
export default Ueditor;2.父组件回调函数
复制代码
1
2
3
4
5
6
7
8
9
<Ueditor id="content" height="200" ref="ueditor" callback={(content) => this.handleUeditorContent(content,this.state.currentSelectionIndex)}/>
//实时在左边列表显示ueditor的内容
handleUeditorContent(content, index) {
let arr = this.state.articleData.articleContent;
arr[index].contentText = content;
this.setState({
articleData: this.state.articleData
});
}实例2：点击父组件按钮，调用ueditor组件方法（例如清空当前ueditor）
实现：
原理：
在父组件引用的ueditor标签中加入ref属性，然后调用ueditor组件中生命的方法即可
1.Ue组件：
见上面的代码，主要用到的changeContent这个函数方法
2.父组件中的ueditor标签：
见上面的代码，主要用到了ref属性
3.调用方法（清空ueditor）：
复制代码
1
2
//在父组件的方法中直接调用
this.refs.ueditor.changeContent("");最后
以上就是野性鸭子最近收集整理的关于React Ueditor 数据交互的全部内容，更多相关React内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[译] 延迟加载 React Components (用 react.lazy 和 suspense)](/uploads/reation/bcimg10.png)
发表评论 取消回复