4. 事件响应_多端低代码开发平台魔笔-阿里云帮助中心

本文介绍如何给自定义组件添加事件响应。

组件的事件响应

首先我们看一下，平台的组件是如何处理事件响应的。

比如按钮：

可以看到是通过属性设置实现的。只不过这里设置的不是简单的数据，而是事件要触发的操作，具体可以配置的内容，请参考页面通用属性 - 事件。

接下来让我们看一下在自定义组件上，这是如何实现的。

添加事件响应

因为事件响应也是通过属性实现的，所以步骤和添加属性类似。

在 src/config.ts 中添加属性配置：

import { API_VERSION, Category, EventType } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: false,
  title: '',
  componentName: 'MobiPcComponentABC',
  category: Category.COMMON,
  icon: 'https://img.alicdn.com/imgextra/i1/O1CN01oufFHB266LbYRkVr3_!!6000000007612-55-tps-20-20.svg',
  configure: [
    {
      title: '事件',
      type: 'group',
      display: 'accordion',
      items: [
        {
          name: 'onClick',
          defaultValue: { type: EventType.none },
          title: '点击',
          setter: {
            type: 'event-logicflow',
            props: {},
          },
        },
      ],
    },
  ],
};

事件对应的属性设置器是event-logicflow。

在组件中添加相应的 Props 参数和处理代码：

import React from 'react';
import config from './config';
import './index.scss';
import { ActionMeta, PropsWithPageContext } from './api';

interface Props {
  onClick?: ActionMeta;
}

const MobiPcComponentABC = (props: PropsWithPageContext<Props>) => {
  return (
    <div className="MobiPcComponentABC">
      <div>{`Hello MobiPcComponentABC ~`}</div>
      <button
        onClick={() => {
          props.pageContext.executeAction(props.onClick);
        }}
      >
        Click me
      </button>
    </div>
  );
};

MobiPcComponentABC.config = config;

export default MobiPcComponentABC;

这里有几点需要说明

event-logicflow 属性设置器配置的 Props 参数类型是 ActionMeta，表示平台用户具体配置的事件信息。
执行事件是调用 executeAction API，参数就是 ActionMeta。
executeAction API 挂载在平台向组件 Props 注入的 API 接口 PageContext 上。
PropsWithPageContext 是方便组件开发者定义 Props 的辅助类型，参见 PropsWithPageContext

组件在设计时加载如下：
我们配置一下，调用前端逻辑流显示一个消息：
预览应用，点击效果如下：

实现思路总结

添加事件响应的具体步骤是

添加一个属性，使用 event-logicflow，让用户可以配置事件触发的效果。
组件 Props 增加对应的 ActionMeta 类型参数。
在需要执行事件时，调用 executeAction API 触发事件。

与 React 组件事件回调的区别

React 组件在处理事件响应时，是直接将回调方法作为 Props 参数传递给组件，然后在组件内部调用。

比如：

import React from 'react';

interface Props {
  onClick: () => void;
}

export default (props: Props) => {
  return <div onClick={props.onClick}>click me</div>;
};

而平台的组件，需要通过属性配置一个 ActionMeta 类型的数据，然后通过 API 触发事件的执行。

核心的区别在于 Props 参数的类型。

事件参数和返回值

在调用executeAction API时，支持传入事件参数，接收执行结果。参考代码如下：

// eventAction 为事件Props参数。 这里假设事件执行结果是一个布尔值
const result: boolean = await pageContext.executeAction(eventAction, {
  // 第一参数是 实体对象， 第二个参数是整数1
  eventParams: [entityObject, 1],
})

if(result) {
	// 后续处理
}

具体参数说明请查看 executeAction 文档。

平台用户设置的不同类型事件，对参数和返回值的处理不同，具体说明请参考不同事件对参数和返回值的处理。

接下来

目前为止，我们已经可以配置组件的属性、设置样式、处理事件了。接下来，请查看5. 数据展示和修改了解组件如何与应用的数据交互。