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.tsxevent,{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"

              }