v2 中如何通过form实例订阅某个字段值改变？？

[userhjp]

通过JSON Schema方式渲染表单，查找了下api 只能在 effects 监听表单值改变，如下：
,form: createForm({ effects() { onFormValuesChange((formvalue) => { console.log(formvalue.values); }); }, })
现在场景是，如何通过已创建完成的form这个对象主动去订阅某个字段值变化，例如，组件A、B、C，A组件为表单组件，B、C组件都需要用到表单的值，且B、C组件和表单上下文无关，布局无关，form实例通过dva共享，但是当A表单值改变后 B、C需要收到最新的值进行展示，B、C也可以通过setValues去修改表单的值，但是B、C都是独立的组件，纠结的是如何让B、C组件都能订阅到表单值改变，求指点，找了api 貌似都只能在createForm里面定义监听
我在form实例上找到一个方法 addEffects() 是否是通过这个来实现？但是具体用法文档没提，写了下感觉不对劲。。求指点

[javahuang]

大概这样

const form = createForm();

form.addEffects('e1', () => {
  onFieldValueChange('aa',(field, form) => {
    //TODO
  })
})

[userhjp]

谢谢，我试了下

  useEffect(() => {
    visual.form.addEffects('formChange', () => {
      onFormValuesChange((form) => {
        debugger;
      });
    });
    return visual.form.removeEffects('formChange');
  }, []);

这样，但是onFormValuesChange并没有执行，什么情况0.0

[javahuang]

你写错了呀，你这样写，一开始就给注册的 effect 销毁了~

useEffect(() => {
    visual.form.addEffects('formChange', () => {
      onFormValuesChange((form) => {
        debugger;
      });
    });
    // return visual.form.removeEffects('formChange');
     return () => visual.form.removeEffects('formChange');
  }, []);

[userhjp]

0.0 也是哈失误 - -，可以了， 谢谢！

[liuweiGL]

https://codesandbox.io/s/naughty-chatterjee-x63xq

[liuweiGL]

推荐你多看看 reactive 相关的文档。

[liuweiGL]

form实例通过dva共享

不建议这么使用，createForm 方法尽量保持跟 FormProvider 组件在同一个组件内，字段组件需要消费 form 实例时使用 hook。

[userhjp]

感谢指点，我也想过这个问题，这里用dva共享form完全是多余的，我正考虑换成 Context 实现共享，你所说的 使用hook消费form那么得确保消费form组件必须是 FormProvider 的子组件，这里我可以尝试下将FormProvider 提到公共的父组件试试，由于刚接触formily不久，不太熟悉。

     <FormProvider form={visual.form}>
        <SchemaField schema={schema} scope={{ formTab }}></SchemaField>
      </FormProvider>

SchemaField 不知道是否必须是 FormProvider 的 Children，如果不是必须就可以将 FormProvider 提到公共的父组件以实现 hook消费form

[javahuang]

题主的意思是 form 实例不要共享~，之前 @janryWang 也说过最好不要共享。不过，我到现在还没发现共享有什么坏处，现在在做编辑器的时候共享一个 form 实例用的还蛮开心的，^_^

[userhjp]

我试了下 FormProvider 可以放在任意父级，舒服，不需要特意去共享form，只需要将页面用到form的组件用 FormProvider 包裹就能在所有子组件使用 useForm 拿到实例