formik 简单表单操作加验证

青旅半醒 2022-12-25 14:56 120阅读 0赞

[官方文档][Link 1]

### formik 表单简单操作 ###

*   *  1.简单结构：
     *  2.form对象里边有数组用
     *  3.ArrayHelper：有什么复杂操作就用arrayHelper去处理：
     *  4.引用全局变量：

## 1.简单结构： ##

<Formik
          initialValues={ initialValues}
          onSubmit={ handleSubmit}
          validationSchema={ SignupSchema}
          validateOnChange={ true}
          validateOnBlur={ true}
        >
          { ({  values, validateForm }: FormikProps<Survey>) => (
            <Form>
              <FieldArray
                name="questions"
                render={ (arrayHelpers: ArrayHelpers) => (
                  <Card>
                    <CardTitle>问卷基本信息</CardTitle>
                      名称:<Field name="name" as={ Input} placeholder="请输入"/>
                          <ErrorMessages name="name" component="div"/>
                      描述:<Field name="description" placeholder="请输入问卷描述"
                      	  as={ Input.TextArea} rows={ 4} />
                      编号:<Field name="code" placeholder="请输入" as={ Input} />
                   </Card>
                )}
              />
            </Form>
          )}
        </Formik>

需要初始化值，在整个form里边,只要Field的name正确，那么传值就没问题，有一些复杂组件的话，就要借助arrayHelpers修改，不会影响原有联动逻辑

## 2.form对象里边有数组用 ##

我下边这些组件都是引用的`'formik-antd'`的,要是项目中没有安装，建议还是老实用上边那样：

//as的形式引用组件，这样引用之后as组件需要接收的值全部传给Field

<FieldArray name={ conditionsName} render={ (arrayHelper) => (
            <>
              { (value.relation === 'or' || value.relation === 'and') && (
                <PlusCircleTwoTone twoToneColor="#0bbd9f" onClick={ () => arrayHelper.push([])} />
              )}
    
              { value.conditions?.map((e: any, i: number) => (
                <PreconditionItem key={ i}>
                  <Cascader
                    name={ `${ conditionsName}.${ i}`}
                    options={ cascaderOptions}
                    onChange={ (v) => handerOptionsChange(v, value.conditions, i)}
                    value={ e}
                    allowClear={ false}
                  />
                  <MinusCircle twoToneColor="#0bbd9f" onClick={ () => handerRemove(arrayHelper, i)} />
                </PreconditionItem>
              ))}
            </>
          )} />

## 3.ArrayHelper：有什么复杂操作就用arrayHelper去处理： ##

export interface ArrayHelpers { 
        /** Imperatively add a value to the end of an array */
        push: (obj: any) => void;
        /** Curried fn to add a value to the end of an array */
        handlePush: (obj: any) => () => void;
        /** Imperatively swap two values in an array */
        swap: (indexA: number, indexB: number) => void;
        /** Curried fn to swap two values in an array */
        handleSwap: (indexA: number, indexB: number) => () => void;
        /** Imperatively move an element in an array to another index */
        move: (from: number, to: number) => void;
        /** Imperatively move an element in an array to another index */
        handleMove: (from: number, to: number) => () => void;
        /** Imperatively insert an element at a given index into the array */
        insert: (index: number, value: any) => void;
        /** Curried fn to insert an element at a given index into the array */
        handleInsert: (index: number, value: any) => () => void;
        /** Imperatively replace a value at an index of an array */
        replace: (index: number, value: any) => void;
        /** Curried fn to replace an element at a given index into the array */
        handleReplace: (index: number, value: any) => () => void;
        /** Imperatively add an element to the beginning of an array and return its length */
        unshift: (value: any) => number;
        /** Curried fn to add an element to the beginning of an array */
        handleUnshift: (value: any) => () => void;
        /** Curried fn to remove an element at an index of an array */
        handleRemove: (index: number) => () => void;
        /** Curried fn to remove a value from the end of the array */
        handlePop: () => () => void;
        /** Imperatively remove and element at an index of an array */
        remove<T>(index: number): T | undefined;
        /** Imperatively remove and return value from the end of the array */
        pop<T>(): T | undefined;
    }

## 4.引用全局变量： ##

const {  values, handleChange } = useFormikContext()
    // values是所有form值，用handleChange去改变form的值，语法：
    const onChange = handleChange(`${ name的值对应就是表单上哪一个值}`) as any
    onChange({  target: {  value: 要修改的值传到这里 } })

[Link 1]: https://formik.org/