amis 作为 UI 库怎么用事件监听和广播事件实现代码与配置混合开发【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 的常规用法是用 JSON 配置生成页面但实际项目中总有一些交互是配置覆盖不了的想在表单提交成功后执行一段自定义业务逻辑、想在输入框值变化时同步外部状态、想点按钮时直接调用 amis 内部的表单方法。将 amis 当成 UI 库用这条路径就是为此设计的页面主体仍然用配置描述只在需要插桩的交互点上写 JS 代码官方称这种模式为“90% 低代码10% 代码开发”的混合模式。本文讲两种文档给出的监听方式各自适合什么场景事件监听把函数直接写在组件配置里onChange、onClick、onFinished交互发生在组件内部时用广播事件组件内部只负责“喊一声”业务逻辑写在最外层渲染代码里配置与代码彻底解耦时用。准备工作与版本前提两种方式都要求把 amis 跑在 React 环境中渲染入口都是从amis包导入renderimport {render as renderAmis} from amis;版本与使用限制以文档标注为准事件动作onEventactionType这套机制从1.7.0开始支持各组件内部陆续补充了很多事件每个组件文档最底下都有事件表说明“监听广播事件”通过渲染参数onBroadcast在外部代码中监听这一方式按 ui-library.md 标注是3.0.0 以后引入事件监听方式需要在配置里直接写函数因此配置不再是纯 JSON暂时不能在可视化编辑器的「代码」模式下使用从 1.3.0 开始按钮的onClick支持字符串格式这种情况才可以在可视化编辑器中使用。如果你还希望按钮点击时弹出消息通知之类的公共方法可以通过amisRequire(amis)拿到 amis 对外提供的方法如toast.info完整清单见 packages/amis/src/index.tsx。方式一事件监听——把函数写进组件配置适用于交互逻辑和组件离得很近、不需要通知到组件之外的场景。下面的示例在一个表单页面上同时监听了三个事件输入框数据变化、表单提交、按钮点击示例取自 ui-library.mdlet amisJSON { type: page, title: 表单页面, body: [ { type: form, mode: horizontal, onFinished: values { console.log(form, values); return false; // 这样可以禁掉 amis 后续的默认行为 }, body: [ { label: Name, type: input-text, name: name, onChange: value { console.log(Name, value); } }, { type: button, label: 按钮修改, onClick: (e, props) { console.log(消息通知); props.formStore.setValues({name: amis}); } } ] } ] };三个监听点各解决一类问题配置项挂载位置能做什么onChange输入项如input-text值变化时读取新值做实时校验或同步外部状态onFinishedform表单提交完成后拿到表单值values返回false可以禁掉 amis 后续的默认行为把提交后的流程完全交给代码onClickbutton拿到e和props其中props.formStore可直接操作所在表单例如props.formStore.setValues({name: amis})修改表单字段这种方式的优点是离组件近、能直接访问组件 props代价是配置里内嵌了函数schema 无法再当作纯 JSON 序列化或拖进可视化编辑器。方式二广播事件——组件发广播外层代码写业务逻辑当业务逻辑不想和 schema 绑死时用广播事件分两步走第一步在组件事件上配置广播动作第二步在最外层渲染时通过onBroadcast监听广播、写业务逻辑。第一步配置 form 事件动作提交成功后广播给表单配置onEvent监听submitSucc事件触发一个名为formSubmited的广播示例取自 ui-library.mdlet amisJSON { type: page, title: 表单页面, body: [ { type: form, mode: horizontal, onEvent: { submitSucc: { actions: [ { actionType: broadcast, args: { eventName: formSubmited } } ] } }, body: [ { label: Name, type: input-text, name: name }, { type: submit, label: Submit } ] } ] };这里的actionType: broadcast就是 事件动作中的“触发广播”动作args.eventName指定广播事件名其他渲染器或外层代码都可以监听这个自定义事件。注意一个版本兼容点event-action.md 标注2.3.2 及以下版本中eventName这类属性与args同级而不是放在args里升级或降级时要按所用版本写对应格式。第二步渲染时通过onBroadcast监听广播渲染 amis 时把回调函数通过onBroadcast传入回调签名为(type, rawEvent, data)在代码里判断事件名并执行业务逻辑import {render as renderAmis} from amis; function DemoComponent() { function handleBroadcast(type: string, rawEvent: any, data: any) { console.log(type); if (type formSubmited) { console.log(内部表单提交了); } } return div {renderAmis(amisJSON, {onBroadcast: handleBroadcast})} /div };这样 schema 里只保留一段“发广播”的配置业务逻辑全部在外层 React 代码中两边可以独立改动。除了监听外部代码广播事件还可以被其他渲染器监听并配置响应动作。event-action.md 的“触发广播”一节给了一个多表单例子一个select值变化时广播broadcast_1并携带动作数据data: {myrole: ${role}, age: 18}三个表单同时监听该广播各自执行reload刷新自己的数据并 toast 提示多个监听者的执行顺序可以通过监听项上的weight控制值越大优先级越高。广播动作可携带的data字段就是各监听方读取事件数据的来源。如何验证监听是否生效文档给出的验证方式就是看控制台输出事件监听方式输入框值变化时console.log(Name, value)打出当前值点击按钮时打出消息通知表单提交完成时onFinished打出form, values。示例中的console.log(内部表单提交了)同理均为文档示例输出实际以你的回调内日志为准。广播事件方式handleBroadcast第一个参数是广播事件名控制台应先打出formSubmited这类type进入对应分支后再打出业务日志。如果回调没有触发先核对两点监听的事件名是否与组件文档事件表中的事件名一致每个组件文档最底下有事件表广播方式下onBroadcast是否确实传给了渲染入口、所用 amis 版本是否满足 3.0.0 以后的条件。边界与限制事件监听方式在配置中写函数schema 不再是纯 JSON不能用于可视化编辑器的「代码」模式按钮onClick自 1.3.0 起支持字符串格式可避开这一限制其余监听点没有此豁免。广播动作参数位置有版本分界args.eventName是 2.3.2 之后的写法2.3.2 及以下版本中eventName与args同级。广播事件本身不携带组件事件之外的上下文监听方需要的事件数据要通过广播动作的data显式携带或通过${event.data}等上下文表达式读取见 事件动作文档。两条路径的选择标准可以归结为逻辑贴着组件、需要访问组件 props如formStore时用事件监听逻辑要沉到外层业务代码、schema 要保持干净可序列化时用广播事件 onBroadcast。需要进一步扩展时事件与动作的完整类型ajax、dialog、toast、reload等以及weight优先级机制都在 docs/zh-CN/concepts/event-action.md 中。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 amis 作为 UI 库怎么用事件监听和广播事件实现代码与配置混合开发
amis 作为 UI 库怎么用事件监听和广播事件实现代码与配置混合开发【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 的常规用法是用 JSON 配置生成页面但实际项目中总有一些交互是配置覆盖不了的想在表单提交成功后执行一段自定义业务逻辑、想在输入框值变化时同步外部状态、想点按钮时直接调用 amis 内部的表单方法。将 amis 当成 UI 库用这条路径就是为此设计的页面主体仍然用配置描述只在需要插桩的交互点上写 JS 代码官方称这种模式为“90% 低代码10% 代码开发”的混合模式。本文讲两种文档给出的监听方式各自适合什么场景事件监听把函数直接写在组件配置里onChange、onClick、onFinished交互发生在组件内部时用广播事件组件内部只负责“喊一声”业务逻辑写在最外层渲染代码里配置与代码彻底解耦时用。准备工作与版本前提两种方式都要求把 amis 跑在 React 环境中渲染入口都是从amis包导入renderimport {render as renderAmis} from amis;版本与使用限制以文档标注为准事件动作onEventactionType这套机制从1.7.0开始支持各组件内部陆续补充了很多事件每个组件文档最底下都有事件表说明“监听广播事件”通过渲染参数onBroadcast在外部代码中监听这一方式按 ui-library.md 标注是3.0.0 以后引入事件监听方式需要在配置里直接写函数因此配置不再是纯 JSON暂时不能在可视化编辑器的「代码」模式下使用从 1.3.0 开始按钮的onClick支持字符串格式这种情况才可以在可视化编辑器中使用。如果你还希望按钮点击时弹出消息通知之类的公共方法可以通过amisRequire(amis)拿到 amis 对外提供的方法如toast.info完整清单见 packages/amis/src/index.tsx。方式一事件监听——把函数写进组件配置适用于交互逻辑和组件离得很近、不需要通知到组件之外的场景。下面的示例在一个表单页面上同时监听了三个事件输入框数据变化、表单提交、按钮点击示例取自 ui-library.mdlet amisJSON { type: page, title: 表单页面, body: [ { type: form, mode: horizontal, onFinished: values { console.log(form, values); return false; // 这样可以禁掉 amis 后续的默认行为 }, body: [ { label: Name, type: input-text, name: name, onChange: value { console.log(Name, value); } }, { type: button, label: 按钮修改, onClick: (e, props) { console.log(消息通知); props.formStore.setValues({name: amis}); } } ] } ] };三个监听点各解决一类问题配置项挂载位置能做什么onChange输入项如input-text值变化时读取新值做实时校验或同步外部状态onFinishedform表单提交完成后拿到表单值values返回false可以禁掉 amis 后续的默认行为把提交后的流程完全交给代码onClickbutton拿到e和props其中props.formStore可直接操作所在表单例如props.formStore.setValues({name: amis})修改表单字段这种方式的优点是离组件近、能直接访问组件 props代价是配置里内嵌了函数schema 无法再当作纯 JSON 序列化或拖进可视化编辑器。方式二广播事件——组件发广播外层代码写业务逻辑当业务逻辑不想和 schema 绑死时用广播事件分两步走第一步在组件事件上配置广播动作第二步在最外层渲染时通过onBroadcast监听广播、写业务逻辑。第一步配置 form 事件动作提交成功后广播给表单配置onEvent监听submitSucc事件触发一个名为formSubmited的广播示例取自 ui-library.mdlet amisJSON { type: page, title: 表单页面, body: [ { type: form, mode: horizontal, onEvent: { submitSucc: { actions: [ { actionType: broadcast, args: { eventName: formSubmited } } ] } }, body: [ { label: Name, type: input-text, name: name }, { type: submit, label: Submit } ] } ] };这里的actionType: broadcast就是 事件动作中的“触发广播”动作args.eventName指定广播事件名其他渲染器或外层代码都可以监听这个自定义事件。注意一个版本兼容点event-action.md 标注2.3.2 及以下版本中eventName这类属性与args同级而不是放在args里升级或降级时要按所用版本写对应格式。第二步渲染时通过onBroadcast监听广播渲染 amis 时把回调函数通过onBroadcast传入回调签名为(type, rawEvent, data)在代码里判断事件名并执行业务逻辑import {render as renderAmis} from amis; function DemoComponent() { function handleBroadcast(type: string, rawEvent: any, data: any) { console.log(type); if (type formSubmited) { console.log(内部表单提交了); } } return div {renderAmis(amisJSON, {onBroadcast: handleBroadcast})} /div };这样 schema 里只保留一段“发广播”的配置业务逻辑全部在外层 React 代码中两边可以独立改动。除了监听外部代码广播事件还可以被其他渲染器监听并配置响应动作。event-action.md 的“触发广播”一节给了一个多表单例子一个select值变化时广播broadcast_1并携带动作数据data: {myrole: ${role}, age: 18}三个表单同时监听该广播各自执行reload刷新自己的数据并 toast 提示多个监听者的执行顺序可以通过监听项上的weight控制值越大优先级越高。广播动作可携带的data字段就是各监听方读取事件数据的来源。如何验证监听是否生效文档给出的验证方式就是看控制台输出事件监听方式输入框值变化时console.log(Name, value)打出当前值点击按钮时打出消息通知表单提交完成时onFinished打出form, values。示例中的console.log(内部表单提交了)同理均为文档示例输出实际以你的回调内日志为准。广播事件方式handleBroadcast第一个参数是广播事件名控制台应先打出formSubmited这类type进入对应分支后再打出业务日志。如果回调没有触发先核对两点监听的事件名是否与组件文档事件表中的事件名一致每个组件文档最底下有事件表广播方式下onBroadcast是否确实传给了渲染入口、所用 amis 版本是否满足 3.0.0 以后的条件。边界与限制事件监听方式在配置中写函数schema 不再是纯 JSON不能用于可视化编辑器的「代码」模式按钮onClick自 1.3.0 起支持字符串格式可避开这一限制其余监听点没有此豁免。广播动作参数位置有版本分界args.eventName是 2.3.2 之后的写法2.3.2 及以下版本中eventName与args同级。广播事件本身不携带组件事件之外的上下文监听方需要的事件数据要通过广播动作的data显式携带或通过${event.data}等上下文表达式读取见 事件动作文档。两条路径的选择标准可以归结为逻辑贴着组件、需要访问组件 props如formStore时用事件监听逻辑要沉到外层业务代码、schema 要保持干净可序列化时用广播事件 onBroadcast。需要进一步扩展时事件与动作的完整类型ajax、dialog、toast、reload等以及weight优先级机制都在 docs/zh-CN/concepts/event-action.md 中。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考