如何封装一个表单

119 阅读1分钟

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) || ''Ï
    )