ant4 form

69 阅读 0 评论 46 点赞

我是靠谱客的博主感动耳机，最近开发中收集的这篇文章主要介绍ant4 form，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

4版本的form
官方Form API

不再需要使用getFieldDecorator绑定字段在<Form.Item name="field"> 使用name字段即可

validateFieldsAndScroll 校验滚动也变成了 scrollToFirstError={true} 添加到<Form>中即可

不过要使用submit button添加htmlType={"submit"}

normalize和getValueFromEvent 我的感觉是可以实现同样的功能

联动的功能通过getValueFromEvent这个方法配合form里的其他api基本上都能实现了

可以有效的减少状态库的使用，在页面初始化的时候设置下详情就够了

剩下的在表单里面就可以操作了

显示详情只需要设置个initialValue或者initialValues

import React, { useEffect, useState } from 'react';
import 'antd/dist/antd.css';
import { DatePicker, Checkbox, Form, Button } from "antd"

const CheckboxGroup = Checkbox.Group;

const options = [
    { label: 'All', value: 'All' },
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' },
];

const App = (props) =>  {
    const [form]  = Form.useForm()
    const { getFieldValue, validateFields, setFieldsValue } = form
    const normalizeAll = (value, preValue = []) => {
        const allList = ['All', 'Apple', 'Pear', 'Orange']
        // 可根据需要 通过 setFieldsValue 设置联动效果 
        // normalizeAll 有第二个参数 可以获取老值
        // getValueFromEvent 需要通过getFieldValue 或 getFieldsValue 获取老值
        if (value.indexOf('All') >= 0) {
            if (value.length < allList.length && preValue && preValue.length === allList.length) {
                const index = value.indexOf("All")
                index >= 0 && value.splice(index, 1)
                return value
            }
            return allList;
        }

        if (value.indexOf('All') < 0 && preValue && preValue.indexOf('All') >= 0) {
            return [];
        }

        if (value.indexOf('All') < 0 && value.length === allList.length - 1) {
            return allList;
        }

        if (value.length < allList.length) {
            const index = value.indexOf("All")
            index >= 0 && value.splice(index, 1)
        }
        return value
    };

    const getValueFromEvent = (value) => {
        // 可根据需要 通过 setFieldsValue 设置联动效果
        const preValue = getFieldValue("note")
        const allList = ['All', 'Apple', 'Pear', 'Orange']

        if (value.indexOf('All') >= 0) {
            if (value.length < allList.length && preValue && preValue.length === allList.length) {
                const index = value.indexOf("All")
                index >= 0 && value.splice(index, 1)
                return value
            }
            return allList;
        }

        if (value.indexOf('All') < 0 && preValue && preValue.indexOf('All') >= 0) {
            return [];
        }

        if (value.indexOf('All') < 0 && value.length === allList.length - 1) {
            return allList;
        }

        if (value.length < allList.length) {
            const index = value.indexOf("All")
            index >= 0 && value.splice(index, 1)
        }
        return value
    }

    const handleSubmit = async () => {
        try {
            const values = await validateFields()
            console.log(values)
        } catch (err) {
            const { errorFields } = err
            console.log(errorFields)
        }

    }

    const onValuesChange = (changedValues, allValues) => {
        // key 值修改的字段
        // 可根据需要 通过 setFieldsValue 设置联动效果
        const key = Reflect.ownKeys(changedValues)[0]
        console.log(key)
    }

    return (
        <div className="App">
            <Form
                form={form}
                scrollToFirstError={true}
                onValuesChange={onValuesChange}
            >
                <Form.Item
                    name="note"
                    label="Note"
                    rules={[{required: true,message: "请选择"}]}
                    // normalize={normalizeAll}
                    getValueFromEvent={getValueFromEvent}
                >
                    <CheckboxGroup options={options} />
                </Form.Item>
                <Form.Item
                    name="note1"
                    label="Note1"
                    rules={[{required: true,message: "请选择"}]}
                    normalize={normalizeAll}
                    // getValueFromEvent={getValueFromEvent}
                >
                    <CheckboxGroup options={options} />
                </Form.Item>
                <Button type={"primary"} htmlType={"submit"} onClick={handleSubmit}>提交</Button>
            </Form>
        </div>
    );
}

export default App;