amis 事件动作 和 行为按钮 常用用法

行为按钮 action （仅是对click事件的处理）

actionType：这是 action 最核心的配置，来指定该 action 的作用类型，支持：ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。

Button的本质就是一个Action 行为按钮。

1. 按钮集合 actions

"actions": [  //按钮集合  有的组件中是叫"buttons": [
      {
        "label": "上传${model}",
        "type": "button",
        "level": "link",
        "id": "u:f73c31f82206",
        "api": {
          "method": "post",
          "url": "/lb.wind/api/Device/upload/model/file",
          "data": {
            "serial": "${serial}",
            "file": "${name}",
            "model": "${model}"
          }
        },
        "actionType": "ajax",
        "className": "m-l-lg"
      }
    ]

2.action 还可以使用 body 来渲染其他组件，让那些不支持行为的组件支持点击事件，比如下面的例子

    {
      "type": "action",
      "body": {
      "type": "image",
      "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
      },
      "tooltip": "点击会有弹框",
      "actionType": "dialog",
      "dialog": {
        "title": "弹框",
        "body": "这是个简单的弹框。"
      }
    }

3.onClick定义点击事件，里面提供了event和props对象. props 可以拿到这个组件的其他属性，同时还能调用 amis 中的内部方法,数据在props.data中。event 就是 React 的事件。

{
    "label": "点击",
    "type": "button",
    "onClick": "props.onAction(event, {
        "actionType": "ajax",
        "api": {
        "method": "PATCH",
        "url": "/lb.iot/api/DeviceTree/"+m.id,
        "data": m,
        }
    });
"
  }

4.自定义组件使用Action(button)行为按钮：

onMount: (dom, data, onChange, props) => {
  const button = document.createElement('button');
  button.innerText = '点击修改姓名';
  button.onclick = event => {
    onChange('new name', 'name');
    props.onAction(  //详见amis/src/renderes/Action.tsx
      event,
      {
        type: 'action',
        label: '弹个框',
        actionType: 'dialog',
        dialog: {
          title: '弹框',
          body: 'Hello World!'
        }
      },
      {} // 这是 data
    );
    event.preventDefault();
  };
  dom.appendChild(button);
};

事件动作（onEvent属性 支持多种事件配置）

通过onEvent属性实现渲染器事件与响应动作的绑定。onEvent内配置事件和动作映射关系，actions属性是事件对应的响应动作的集合.

actions中动作都是按顺序一个个执行的。

事件包含渲染器事件和广播事件。

• 渲染器事件，由具体的渲染器组件提供，每个渲染器组件暴露的事件可以查看amis组件文档的事件表；    比如 button按钮的click事件   select的change事件等

• 广播事件，即自定义事件，可以自定义派发的事件名称eventName(通过广播动作触发)，其他渲染器可以监听该自定义事件并配置响应动作。

action动作包含通用动作、组件动作、广播动作、自定义动作，可以通过配置actionType来指定具体执行什么动作。

1.通用动作：包含发送 http 请求、跳转链接、浏览器回退、浏览器刷新、打开/关闭弹窗、打开/关闭抽屉、打开对话框、弹出 Toast 提示、复制、发送邮件、刷新、控制显示隐藏、控制启用禁用状态、设置数据.

ps: 发送请求(ajax)动作 "silent": true 或者 msg为空字符串时不会提示message(推荐设置slient,否则responseResult无法映射msg进去)。

另外动作中ajax请求比较简单无spinner加载动画和遮罩(可自行增加spinner实现遮罩 {"type": "spinner", "overlay": true, "showOn": "this.showSpinner"})

比如：setValue动作使用(组件中传递的参数是value, args: {value: {age:17} })  

{
  "type": "form",
  "title": "表单",
  "body": [
    {
      "label": "文本框",
      "type": "input-text",
      "name": "text",
      "id": "u:fdd256b622e0"
    }
  ],
  "id": "u:c123bdb1db9e",
  "debug": true
}



        "onEvent": {
          "click": {
            "actions": [
              {
                "componentId": "u:c123bdb1db9e", //设置到form中
"expression": "!this.event.data.lock", //动作触发判断条件
                "args": {
                  "value": "${event.data}" //此组件数据域(event.data)中数据全部传入.  
                },
                "actionType": "setValue"
              }
            ],
            "weight": 0
          }
        }

2.组件动作：是一些组件特有动作。

比如：触发tabs组件的changeActiveKey动作,修改激活的tab值  

  {
      "type": "button",
      "label": "更新",
      "level": "primary",
      "className": "mt-2 mb-2",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "changeActiveKey",
              "componentId": “tabs”,
              "args": {
                "activeKey": 1
              }
            }
          ]
        }
      }
},

3.广播动作：通过配置actionType: 'broadcast'和eventName实现触发一个广播，可以通过配置动作执行优先级weight来控制所有监听者的动作执行顺序。(event action)

//点击按钮触发 广播参数事件     

{
  "type": "button",
  "id": "u:f360e41ffe34",
  "name": "role",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "broadcast",
          "eventName": "broadcast_1",  //广播参数
          "args": {
            "age": 18
          }
        }
      ]
    }
  }
}

//监听广播事件 并触发form的reload或setValue动作.   

{
  "type": "form",
  "name": "sub-form1",
  "onEvent": {
    "broadcast_1": {
      "actions": [
         // {
        //   "actionType": "reload",
        //   "args": {
        //     "myname": "${event.data.age}"
        //   }
        // },
        {  //设置input-text组件的value值
          "actionType": "setValue",
          "componentId":"u:4b27eefc1f18",
          "args": {
            "value": "${event.data.age}"
          }
        },
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "表单1刷新完成"
          }
        }
      ]
    }
  },
  "body": [
    {
      "type": "input-text",
      "label": "昵称",
      "name": "myname",
      "disabled": false,
      "mode": "horizontal",
      "id": "u:4b27eefc1f18"
    }
  ]
}

4.自定义动作： 自定义js写动作

1.动作执行函数doAction，可以执行所有类型的动作

2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性

3.事件对象event，event.data 获取数据域中数据，在doAction之后执行event.stopPropagation = true;可以阻止后续动作执行

比如：      {

                "actionType": "custom",

                "script": "\n console.log(context.props, event);\n doAction({\n  actionType: 'setValue', \n  componentId: 'u:c123bdb1db9e', \n  args: {value: {age:17} } \n}); \n"

              }