Editor.jsx

红色模块代码

import './style.less'; // 载入样式
import React, { Component } from 'react';
import { Input } from 'antd';
import debounce from 'lodash/debounce'; // 性能优化引入了防抖函数
import { toJS } from 'mobx';
const { TextArea } = Input;
/**
 * @desc dom layer,默认的props有
 * this.props.app:涵盖了所有操作app数据的方法
 * this.props.layerfun: 所有插件的相关数据和方法
 * this.props.layer: 当前layer的json数据(已经交给mobx管理),可以通过toJS() 转化会正常的JS数据。
 * 这里以 dom插件为例。
 * dom的数据结构参考 4.4 Origindata.js
 */
export default class Editor extends Component {
    constructor(props) {
        super(props);
        const layerdata = toJS(props.layer); // 注意下,这里一定要转化成原始JS数据,不然防抖函数会出错
        this.state = {
            data: layerdata.data // 字符串 'SSSSS',
        };
    }

    changeTextArea = e => {
        this.setState({ data: e.target.value });
        this.setLayer(e.target.value);
    };

    // 设置mobx管理的layer数据
    setLayer = debounce(str => {
        this.props.layer.data = str; // 设置数据会自动更新视图
        $(document).trigger('h5ds.setHistory'); // 保存操作记录
    }, 500);

    render() {
        const { data } = this.state;
        // 这里要注意下。所以的插件类名格式为: h5ds-exlayer-xxx
        return (
            <div className="h5ds-exlayer-dom">
                <TextArea onChange={this.changeTextArea} placeholder="..." rows={8} value={data} />
            </div>
        );
    }
}

results matching ""

    No results matching ""