amis icon indicating copy to clipboard operation
amis copied to clipboard

doAction使用setValue改变值怎么触发组件的值改变事件?

Open LAMMUpro opened this issue 10 months ago • 4 comments

实现场景:

通过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"
        }
      ]
    }
  ]
}

LAMMUpro avatar Apr 18 '24 02:04 LAMMUpro

@nwind @TeCHiScy @luckyufei @weien601 大佬们,怎么办呀,找了一圈文档,这个问题貌似解决不了?(在doAction setValue的同时触发组件change事件)

LAMMUpro avatar Apr 18 '24 03:04 LAMMUpro

解决不了,动作里面不会触发事件,之前 @hsm-lv 故意这么设计的

2betop avatar Apr 18 '24 03:04 2betop

触发的话有什么隐患吗?

我自定义了一个事件,用于平替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());

LAMMUpro avatar Apr 18 '24 05:04 LAMMUpro

当前确实没有支持间接触发change,不过有支持的计划

hsm-lv avatar Apr 29 '24 07:04 hsm-lv

@nwind @TeCHiScy @luckyufei @weien601 大佬们,怎么办呀,找了一圈文档,这个问题貌似解决不了?(在doAction setValue的同时触发组件change事件)

我是通过给input-text等常用的formitem扩展了一个属性emitChangeByScope来支持类似的场景

luckyufei avatar Jul 25 '24 01:07 luckyufei