amis
amis copied to clipboard
doAction使用setValue改变值怎么触发组件的值改变事件?
实现场景:
通过doAction - setValue改变组件的值(比如input/select组件的值),并没有触发该组件值变化配置的对应事件
存在的问题:
做回显时,有时候需要组件之间联动更新,需要触发对应组件值变化 配置的事件
当前方案:
手动输入角色,控制台打印“值改变了”,点击更新,角色值改变,但是没触发事件,很多时候我需要触发事件来保持一致性
{
"type": "page",
"title": "更新表单数据",
"data": {
"globalData": {
"myrole": "法官",
"mymsg": "该吃饭了!"
}
},
"body": [
{
"type": "button",
"label": "更新",
"level": "primary",
"className": "mb-2",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "form_data",
"args": {
"value": "${globalData}"
}
}
]
}
}
},
{
"type": "form",
"id": "form_data",
"title": "表单",
"debug": true,
"data": {
"myrole": "预言家",
"age": "18"
},
"initApi": "/amis/api/mock2/form/initData",
"body": [
{
"type": "input-text",
"label": "角色",
"name": "myrole",
"disabled": false,
"mode": "horizontal",
"onEvent": {
"change": {
"weight": 0,
"actions": [
{
"ignoreError": false,
"script": "\nconsole.log('值变化了');\n",
"actionType": "custom"
}
]
}
}
},
{
"type": "input-text",
"label": "年龄",
"name": "age",
"disabled": false,
"mode": "horizontal"
}
]
}
]
}
@nwind @TeCHiScy @luckyufei @weien601 大佬们,怎么办呀,找了一圈文档,这个问题貌似解决不了?(在doAction setValue的同时触发组件change事件)
解决不了,动作里面不会触发事件,之前 @hsm-lv 故意这么设计的
触发的话有什么隐患吗?
我自定义了一个事件,用于平替setValue,以下是demo
// 动作定义
interface IUpdateValueAction extends ListenerAction {
actionType: 'updateValue';
args: {
value: any, // 动作参数1
};
}
/**
* 更新组件数据,并触发组件change事件
*/
export class UpdateValueAction implements RendererAction {
run(action: IUpdateValueAction, renderer: ListenerContext, event: RendererEvent<any>): Promise<RendererEvent<any> | void> {
event.context.scoped.doAction({ ...action, actionType: 'setValue'});
/** 根据组件id拿到组件实例 */
const component = event.context.scoped.getComponentById(action.id);
if (component) {
component.changeValue(action.data);
}
return Promise.resolve(event);
}
}
// 注册自定义动作
registerAction('updateValue', new UpdateValueAction());
当前确实没有支持间接触发change,不过有支持的计划
@nwind @TeCHiScy @luckyufei @weien601 大佬们,怎么办呀,找了一圈文档,这个问题貌似解决不了?(在doAction setValue的同时触发组件change事件)
我是通过给input-text等常用的formitem扩展了一个属性emitChangeByScope来支持类似的场景