1、Form组件 form组件需要实现,状态管理 1.实现一个form实例,通过creatRef结合useImperativeHandle向外暴露当前实例的api
/* Form 能够被 ref 标记,并操作实例。 */
useImperativeHandle(ref, () => providerFormInstance, [])
return (<form>
{...children}
</form>)
forwardRef(Form)
2.创建一个FormContext方便为子孙组件传值(使用content是考虑到formItem组件有可能有多层嵌套)
```js
const RenderChildren = <FormContext.Provider value={formInstance} > {children} </FormContext.Provider>
```
2、FormItem组件 FormItem组件需要实现:
-
注册表单 =》通过向store.model中添加key
registerValidateFields(name, control, model = {}){
if (this.defaultFormValue[name]) model.value = this.defaultFormValue[name] /* 如果存在默认值的情况 */
// 根据初始值生成一个 model 数据类型
const initModel = FormStore.createValidate(model)
this.model[name] = initModel; //formItem中的所有状态数据 一个name(key)对应一个modelItem
this.control[name] = control; //控制formItem的方法 一个name(key)对应一个control
}
-
让当前控件变为受控组件。
//通过cloneElementAPI给组件添加一个 trigger方法
renderChildren = cloneElement(children,
[trigger]: (e) => { // trigger 为传入的事件名称
const value = e.target.value
console.log('getControlled = handleChange', name, value);
dispatch({ type: 'setFieldsValue' }, name, value)
},
value : dispatch({ type: 'getFieldValue' }, name) || ''Ï
)