Formily x-reactions的实现原理如下: 1. Formily使用mobx作为状态管理工具,将表单数据和表单控件的状态进行响应式绑定。 2. Formily x-reactions会通过监听表单数据的变化,来触发Reactions中定义的副作用操作。 3.在表单数据发生变化时,Formily会自动触发相关的更新操作,并通知相关的表单控件进行重新渲染。 4. Reactions...
Cloud Studio代码运行 {"type":"object","properties":{"source":{"type":"string","title":"Source","x-component":"Input","x-component-props":{"placeholder":"请输入"},"x-reactions":[{"when":"{{$self.value == '123'}}","target":"target","fulfill":{"state":{"visible":true}},"...
第四点:前面讲到Formily2.0内核是基于类似于Mobx的@formily/reactive来设计的了,所以我们在协议层也定义了一响应器的概念,叫做x-reactions,它既支持主动联动模式,也支持被动(依赖追踪)联动模式。协议描述联动的能力直接强大一个数量级。 模型设计的不完善导致答疑量剧增 字段卸载的时候自动删值这个默认行为让用户非常非常...
这跟React的UI = f(state)的方式是不太相同的,formily应该看成是类似Vue的框架,你要修改Form的state本身,而不是修改Field传入的属性来修改UI的。 单纯依赖data,使用@formily/reactive创建一个observable对象给x-reactions依赖、或者注册到对应SchemaField 层级就行。 5、参考 https://github.com/alibaba/formily/disc...
"x-component": "Input", "x-component-props": { "placeholder": "请输入" } }, "target": { "type": "string", "title": "Target", "x-component": "Input", "x-component-props": { "placeholder": "请输入" }, "x-reactions": [ ...
5.3 x-reactions 式联动 此类联动仅在 Json Schema 层面起作用,所以不涉及到 JavaScript 代码的逻辑,Schema 的联动无需刻意区分主动还是被动,指定 target 字段即向目标字段发起联动,未指定 target 字段即需要依靠依赖项,依赖项的字段变动触发执行条件,从而改变自身字段的状态。 // Json Schema { quantity: { type...
可以在x-reactions中进行相关操作,借助x-reactions描述了 target 字段,依赖了 source 字段的值,如果值为'123'的时候则显示 target 字段,否则隐藏,这种联动方式是一种被动联动,那如果我们希望实现主动联动呢?可以这样: { "type": "object", "properties": { ...
答疑成本问题得到缓解，通过定义新Schema Type Void、引入x-decorator/x-decorator-props描述包装器、维护dataSource状态、定义x-reactions响应器概念，以及废弃自动删值的默认行为，使答疑更加清晰。自定义组件扩展机制采用工厂式注册，使用@formily/reactive实现更优雅的开发方式，引入readPretty模式，使自定义...
fix(json-schema): fix typings and x-reactions.when (#2360) Oct 28, 2021 tsconfig.json test(reactive): adding missing tests and correcting existing tests (#… Nov 28, 2021 yarn.lock build(deps): bump axios from 0.18.1 to 1.7.2 (#4185) ...
String name="poo" x-decorator="FormItem" title="POO" x-component="Input" x-reactions={[ { dependencies: ['ioo'], when: '{{$deps[0] == 123}}', fullfill: { state: { value: '3333', }, }, otherwise: { state: { value: '0000', }, }, }, ]} /> </SchemaField.Void> <...