基于react-vant封装表单基本常用组件

react-vant 组件库地址

目录

• 基于react-vant封装表单基本常用组件
• 一、基础组件
• • 1. LocationPicker
• 总结

一、基础组件

1. LocationPicker

效果演示：

组件代码

import React, {useEffect, useRef, useState} from 'react';
import {Cell, Empty, Loading, Picker, Popup} from "react-vant";
import PropType from "prop-types";
import '@/common/style/common.less'
import emptyPic from '@/common/images/empty.png'
import {_arrayFilterEmpty, _isEmpty} from "../../../common/js/utils";


/**
 * 默认值
 */
LocationPicker.defaultProps = {
    isLoaded: false,
    columns: [],
    defaultValues: [],
}

/**
 * 类型和必填校验
 */
LocationPicker.propTypes = {
    defaultValues: PropType.array.isRequired,
    isLoaded: PropType.bool.isRequired
}

function LocationPicker(props) {

    //数据源
    const columns = props.columns;
    //是否必填
    const required = props.required;
    //数据是否已加载
    const isLoaded = props.isLoaded;
    //默认展示数据
    const defaultValues = props.defaultValues;
    //组件数据变化函数
    const onLineChange = props.onLineChange;


    const [showPopup, setShowPopup] = useState(false);
    const [lineValue, setLineValue] = useState('');

    const picker = useRef(null);


    /**
     * 选中值
     * @param val
     * @returns {*[]}
     */
    const handleSelected = (val) => {

        if (val.constructor !== Array) {
            console.error('选中数据格式错误，请处理')
        }
        let textList = []
        let codeList = []
        val.forEach((el) => {
            textList.push(el['text'])
            codeList.push(el['value'])
        })
        textList = _arrayFilterEmpty(textList);
        codeList = _arrayFilterEmpty(codeList);

        //展示数据
        setLineValue(textList.join('-'))
        //向父组件传递数据
        onLineChange(textList, codeList)

    }
    /**
     * 设置默认选中
     * @param defaultArr
     */
    const setDefaultValues = (defaultArr) => {
        picker && picker.current && picker.current.setValues(defaultArr)
    };

    /**
     * 弹出pop
     * @returns {Promise<void>}
     */
    const showPickerPop = async () => {
        await setShowPopup(true)
        setDefaultValues(defaultValues)
    }
    /**
     * 隐藏pop
     * @returns {Promise<void>}
     */
    const hidePickerPop = async () => {
        await setShowPopup(false)
    }

    /**
     * 监听默认值变化
     */
    useEffect(() => {
        setLineValue(defaultValues.join('-'))
    }, [defaultValues]);


    return (
        <div>
            <Cell title="地址" isLink size="large" value={lineValue} required={required} onClick={() =>
                showPickerPop()
            }/>

            <Popup
                visible={showPopup}
                position="bottom"
                style={{height: '45%'}}
                safeAreaInsetBottom
                onClose={() => setShowPopup(false)}
            >

                {!isLoaded && <Loading type="ball" className='content-loading' vertical>加载中...</Loading>}

                {
                    isLoaded && columns.length <= 0 &&
                    <Empty
                        className="custom-image"
                        image={emptyPic}
                        description="暂无数据"
                    />

                }
                {
                    isLoaded && columns.length > 0 &&
                    <Picker
                        columns={columns}
                        ref={picker}
                        onConfirm={async (val) => {
                            handleSelected(val);
                            await hidePickerPop();
                        }}
                        onCancel={async (val) => {
                            handleSelected([]);
                            await hidePickerPop();
                        }}

                    />
                }

            </Popup>

        </div>
    );
}


export default LocationPicker;

页面state 设置：

    //线路基础数据
    const [columns,setColumns] = useState([]);
    const [isLineLoaded, setLineLoaded] = useState(false);
    //当前选择的线路lineList  线路编码lineCodeList
    const [lineList, setLineList] = useState([]);
    const [lineCodeList, setLineCodeList] = useState([]);
    useEffect(() => {
        setTimeout(async () => {
           await setLineLoaded(true)
           await setColumns( [
                {
                    "text": '江苏',
                    "children": [
                        {
                            "text": '苏州',
                            "children": [
                                {
                                    "text": '姑苏区',
                                    value: "001"
                                },
                                {
                                    "text": '吴中区'
                                }
                            ]
                        },
                        {
                            "text": '扬州',
                            "children": [
                                {
                                    "text": '广陵区'
                                },
                                {
                                    "text": '邗江区'
                                }
                            ]
                        }
                    ]
                },
                {
                    "text": '浙江',
                    value: "002",
                    "children": [
                        {
                            "text": '杭州',
                            "children": [
                                {
                                    "text": '西湖区'
                                },
                                {
                                    "text": '余杭区'
                                }
                            ]
                        },
                        {
                            "text": '温州',
                            "children": [
                                "",
                                {
                                    "text": '鹿城区'
                                },
                                {
                                    "text": '瓯海区'
                                }
                            ]
                        }
                    ]
                }
            ])

        }, 5000)
    }, [])

组件引用

    <LocationPicker
                required
                columns={columns}
                defaultValues={lineList}
                isLoaded={isLineLoaded}
                onLineChange={(valArr, codeArr) => {
                    setLineList(valArr);
                    setLineCodeList(codeArr)
                }}/>

总结

每天记录一点，从小小菜鸟变小菜鸟！！！