原理

先让数据变成响应式，再去操作

formily/antd

FormItem

• 相当于Field的封装
• 注意：想让FormItem变成响应式得包一层observer name.title...这些属性是传给Field组件的，怎么传给FormItem？ 只要涉及到组件通信，层级不确定就可以用context 注意:因为要跟formily/react的Field通信只能拿其提供的context

    const field = useContext(FieldContext)
    console.log('field',field);//name.title...这些属性

Input

import React from 'react'

export const Input = (props) => {
    const {value = '',style,...res} = props
  return <input {...res}  value={value} style={{...style,'border':'1px solid blue'}}/>
}

Submit

如果onClikc返回的是false就阻塞提交

import React from 'react'

export const Submit = (props) => {
    const {children,onSubmit,onSubmitSuccess,onSubmitFailed,onClick} = props
  return <button onClick={(e) => {
    if(onClick){
        if(onClick(e) === false){
            return;
        }
    }
  }}>{children}</button>
}

onSubmit提交需要表单，怎么获取？ submit作为其子组件可以拿到其传值，使用formily/react提供的自定义hook，useParentForm（用于读取最近的 Form 或者 ObjectField 实例，主要方便于调用子表单的 submit/validate）

    const form = useParentForm()

    if(onSubmit){
       // 成功执行onSubmitSuccess，否则onSubmitFailed
       form.submit(onSubmit).then(onSubmitSuccess).catch(onSubmitFailed)
   }