CloudWise 文档

提示

组件通信(联动)主要是通过一套事件配置来完成.

组件中的事件在运行过程中会在特定时机被trigger.

# static events = {}

我们提供了一个events的常量用于组件订阅一些事件来监听组件内部的事件。比如点击事件、屏幕缩放以及生命周期等。

class Demo extends Component {
  static events = {
    // 记得这里不要用箭头函数，会导致this丢失
    click() {
      this.handleComponentClick();
    }
  };

  handleComponentClick = () => {
    console.log("component click");
  };

  _render() {
    const container = this.getContainer();
    container.html("<span>Hello CW !</span>");
  }
}

# this.bind|once|unbind

在必要的的时候可以给组件绑定事件来实现功能扩展.组件类Component继承了支撑事件机制的基类Event.

  • bind(eventName, handler): 绑定事件
  • unbind(eventName, handler?): 解绑事件, 若不传 handler 则默认全部解绑
  • once(eventName, handler): 绑定仅触发一次事件
class Demo extends Component {
  _construct() {
    this.bind("click", () => this.handleComponentClick());
    this.once("mousemove", () => this.handleComponentMousemove());
  }

  handleComponentClick = () => {
    console.log("component click");
    // 演示效果，我们点击一次之后就解绑
    this.unbind("click");
  };

  handleComponentMousemove = () => {
    console.log("component mouse move");
  };

  _render() {
    const container = this.getContainer();
    container.html("<span>Hello CW !</span>");
  }
}

# 组件联动

# 1. 大屏设置进行联动

大屏设置的前提是需要组件内支持, 首先组件内需要书写对应的发射和接收事件代码.

# 组件添加和接收事件

  • ListenEvent
import ReactComponent from "data-vi/ReactComponent";
class ListenEvent extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    content: "暂无事件发生"
  };

  componentDidMount() {
    if (this.props.parent) {
      this.props.parent.bind("transpartDate", data => {
        this.setState({
          content: JSON.stringify(data)
        });
      });
    }
  }
  render() {
    return <div style={{ fontSize: 40 }}>{this.state.content}</div>;
  }
}
export default class Component extends ReactComponent {
  getReactComponent() {
    return ListenEvent;
  }
}
  • EmitEvent
import ReactComponent from "data-vi/ReactComponent";
class EmitEvent extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick = () => {
    if (this.props.parent) {
      this.props.parent.trigger("transpartDate", { from: "EmitEvent" });
    }
  };

  render() {
    return (
      <div style={{ fontSize: 40 }} onClick={this.handleClick}>
        click me
      </div>
    );
  }
}

export default class Component extends ReactComponent {
  getReactComponent() {
    return EmitEvent;
  }
}

# 创建大屏并添加事件

  • 进入大屏编辑页面
  • 右侧选择 事件 Tab
  • 事件源选择trigger事件的组件(即EmitEvent)
  • 事件类型选择自定义: 内容填写为当前trigger名称
  • 操作选择调用组件方法并选择bind事件组件(即ListenEvent)
  • 事件动作选择tigger
  • 事件类型同第四步

# 组件 DOM 事件

  • click
  • dbclick
  • mousedown
  • mouseup
  • mousemove
  • mouseout
  • mouseenter

# 组件内部事件

事件名 触发时刻 携带参数 说明
mounted 挂载完成
unMount 卸载完成
render 渲染选项完成
update 更新选项完成 要更新的选项
refresh 刷新选项完成
optionsChange 选项被改变 改变后的全部选项 可以作为选项的 filter 使用
draw 绘制数据完成 绘制的数据
redraw 重绘数据完成
normalize 获取标准化数据 标准化后的数据 可以作为标准化数据的 filter 使用
dataChange 数据被改变 改变后的数据 可以作为数据的 filter 使用
load 开始加载数据源数据
loaded 数据源数据加载完成 数据源数据

# FAQ

# 1. 看示例上事件是需要显示的声明吗？

事件处理实际可以分为三种情况

  • 借助events来注册对应的我们提供的一系列事件
  • 非React组件可以利用jquery或原生事件进行事件处理
  • React组件直接按照React的形式进行事件处理即可

← 组件进阶 →