您的位置:首页 > 汽车 > 时评 > amis源码 更新组件数据域的几种方法

amis源码 更新组件数据域的几种方法

2024/7/2 23:28:08 来源:https://blog.csdn.net/qq_42152032/article/details/140066026  浏览:    关键词:amis源码 更新组件数据域的几种方法

更新组件数据域的几种方法:

默认都是合并数据,非覆盖(指定replace为true的才是覆盖):

const comp = amisScoped.getComponentById(id);//或者getComponentByName(name)

1.comp.setData(values, replace); //更新多个值values, replace可以指定是否覆盖

2.comp.props.onBulkChange(values); //更新多个值values,但是不可设置replace,为合并数据,不覆盖。

3.comp.props.onChange(value); //更新单个值。

例如:

1.Form中还可以这样更新数据域,支持replace。

1-1.formComp.setValues({'name1': 'othername'}, replace); //核心实现为:store.setValues(values, undefined, replace);   

formComp.getValues();//核心实现为: return this.props.store.data;

1-2.formComp.setData({'name1': 'othername'}, replace); //核心实现为:super.setValues(values, replace); 即formComp.setValues

formComp.getData();// 核心实现为: return this.getValues();

1-3.formComp.props.onBulkChange(values); //核心实现为:store.setValues(values);

1-4.formComp.props.onChange(value, name);//核心实现为:store.changeValue(name, value, changePristine);

store.setValues最终还调用了self.updateData(values, tag, replace, concatFields); 即iRenderer类型mobx树中的updateData动作。

2.FormItem表单项中,还能可以这样来修改其它表单项值, 支持replace

comp.props.formStore.setValues({name: 'amis'}, undefined, replace);

comp.props.onBulkChange(values); // comp.props.data   

comp.props.onChange(value);//comp.props.value

3.Page中可以这样更新数据域:

3-1.comp.setData(values, replace); //核心实现为: this.props.store.updateData(values, undefined, replace);

3-2.comp.props.onBulkChange({a: 1}); //核心实现为:this.props.store?.updateData?.(values);

//保存到event事件上下文

event.setData({ ...event.data, xx:xxx });

setValue动作原理:

if (component?.setData) {  

return component?.setData(  action.args?.value,  dataMergeMode === 'override',  action.args?.index );

} else {  return component?.props.onChange?.(action.args?.value); }

在自定义动作中通过底层代码自行模拟setValue动作,并触发formItemChange的tracker

ps: 还是建议使用amis提供的doAction()方法来处理,简单。

//可以直接获取FormItem component并通过onChange更新

let component = event.context.scoped?.['getComponentById']('u:3c0f4781736d');

component?.props.onChange?.(event.data.testVal);

const { id,  name,  label,  type,  value} = component.props;

   component.props.env?.tracker( //触发tracker追踪

     {   

       eventType: 'formItemChange',

       eventData: { id, name,  label, type, value  }

     },

     component.props

   );

//也可以获取Form component 并通过onChange修改指定FormItem项的值。

let mform = event.context.scoped?.['getComponentByName']('mform');

mform?.props.onChange?.(event.data.testVal, component?.props?.name);

//event.data 数据域数据    component.props 组件属性

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com