React函数式组件与类组件（weixin公众号【图说GIS】）

类组件

import React from 'react';
import { Select } from 'antd';
import { IndexBarDataNode, LoadRoadDatas, RoadCommonSelectProps } from './roadCommonSelect';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
import { getRoadCodes, RoadCommonSelectCore } from './roadCommonSelect/roadCommonSelectCore';
import { RoadQueryParam, RoadQueryParamsExt } from '../roadData/roadInfo/roadInfoUtil';
import { Utils } from 'wit-helper';

export interface RoadDropDownSelectProps extends RoadCommonSelectProps {
    name?: string
    size?: SizeType
    dropdownStyle?: React.CSSProperties
    placeholder?: string
    onSearch?: (value: string) => void
}


export interface RoadDropDownSelectState {
    queryParams?: RoadQueryParam
    value?: string[]
    searchValue?: string
    roadNatures?: string[]
    open?: boolean
    allGroups?: IndexBarDataNode[]
    loading?: boolean
    codes?: string[]
}
/**
 * 下拉选择路线组件
 */
export class RoadDropDownSelect extends React.Component<RoadDropDownSelectProps, RoadDropDownSelectState>{
    // const isOpen = props.defaultSelectFirst || props?.value && props.value.length > 0
    constructor(props: RoadDropDownSelectProps) {
        super(props)
        const { queryParams, value, searchValue, roadNatures } = this.props
        this.state = {
            queryParams,
            value, searchValue,
            codes: [],
            roadNatures,
            open: false,
            loading: false,
            allGroups: []
        }
    }


    componentDidMount() {
        if (this.state.queryParams)
            this.loadRoadDatas(this.state.queryParams)
    }

    componentWillReceiveProps(nextProps: RoadDropDownSelectProps) {
        const { queryParams, roadNatures, value } = nextProps
        if (!Utils.isEqual(this.props.queryParams, queryParams)) {
            this.setState({ queryParams }, () => {
                if (this.state.queryParams)
                    this.loadRoadDatas(this.state.queryParams)
            })
        }

        if (!Utils.isEqual(this.props.roadNatures, roadNatures)) {
            this.setState({ roadNatures })
        }

        if (!Utils.isEqual(this.props.value, value)) {
            const _value = value ? value : []
            const _codes = getRoadCodes(this.state.allGroups ? this.state.allGroups : [], _value)
            this.setState({ value: _value, codes: _codes })
        }
    }

    onSelect = (value: string[], codes: string[]) => {
        this.setState({
            value, codes
        })
        this.onSearch("")
        if (this.props.onChange) {
            this.props.onChange(value, codes)
        }
        if (!this.props.multiple) {
            this.setState({
                open: false
            })
        }
    }

    onSearch = (value: string) => {
        this.setState({ searchValue: value })
    }

    onDeselect = (_value: string) => {
        if (_value) {
            if (this.state.codes) {
                const index = this.state.codes.findIndex((data) => {
                    return data === _value
                })
                if (index > -1) {
                    const keys = JSON.parse(JSON.stringify(this.state.value))
                    keys.splice(index, 1)
                    const _codes = JSON.parse(JSON.stringify(this.state.codes))
                    _codes.splice(index, 1)
                    this.onSelect(keys, _codes)
                }
            }
        }
    }


    onCodeChange = (codes: string[]) => {
        this.setState({ codes })
    }

    onKeyDown = (e: any) => {
        if (e.keyCode === 13) {
            if (this.props.onSearch) {
                this.props.onSearch(e.target.value)
            }
        }
    }

    onLoad = () => {

    }


    onDropdownVisibleChange = (visible: boolean) => {
        this.setState({ open: visible })
    }


    loadRoadDatas(queryParams: RoadQueryParamsExt) {
        this.setState({ loading: true })
        const { dataTimes, depts, techLevels, pavementTypes, } = queryParams
        if (!dataTimes || dataTimes.length === 0) {
            console.log("请输入数据时间")
            return;
        }

        const param: RoadQueryParamsExt = { dataTimes, depts, techLevels, pavementTypes }

        LoadRoadDatas(param, (datas) => {
            const _datas = JSON.parse(JSON.stringify(datas))
            this.setState({ allGroups: _datas, loading: false })
            if (this.state.value) {
                const codes = getRoadCodes(_datas, this.state.value)
                this.setState({
                    codes
                })
            }
        })
    }
    render() {
        const { searchValue, codes, open, loading, roadNatures, value, allGroups } = this.state
        return <Select
            size={this.props.size}
            style={this.props.style ? this.props.style : { width: "100%" }}
            placeholder={this.props.placeholder ? this.props.placeholder : "选择路线，可输入关键字检索！"}
            mode="tags"
            showArrow
            searchValue={searchValue}
            autoClearSearchValue
            value={codes}
            onKeyDown={this.onKeyDown.bind(this)}
            onDeselect={this.onDeselect.bind(this)}
            onSearch={this.onSearch.bind(this)}
            open={open}
            onDropdownVisibleChange={this.onDropdownVisibleChange.bind(this)}
            dropdownRender={menu => (
                <>
                    <RoadCommonSelectCore  {...this.props} style={this.props.dropdownStyle} loading={loading} defaultSelectFirst={this.props.defaultSelectFirst} roadNatures={roadNatures} searchValue={searchValue} value={value} multiple={this.props.multiple} allGroups={allGroups} hideTag hideSearch onChange={this.onSelect.bind(this)} onCodeChange={this.onCodeChange.bind(this)} onLoad={this.onLoad.bind(this)} />
                </>
            )}
        >
        </Select>
    }

};

函数式组件

import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import { IndexBarDataNode, LoadRoadDatas, RoadCommonSelectProps } from './roadCommonSelect';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
import { getRoadCodes, RoadCommonSelectCore } from './roadCommonSelect/roadCommonSelectCore';
import { RoadQueryParamsExt } from '../roadData/roadInfo/roadInfoUtil';
import { Utils } from 'wit-helper';

export interface RoadDropDownSelectProps extends RoadCommonSelectProps {
    name?: string
    size?: SizeType
    dropdownStyle?: React.CSSProperties
    placeholder?: string
    onSearch?: (value: string) => void
}
/**
 * 下拉选择路线组件(函数式实现)
 */
export const RoadDropDownSelect = (props: RoadDropDownSelectProps) => {
    // const isOpen = props.defaultSelectFirst || props?.value && props.value.length > 0
    const [queryParams, setQueryParams] = useState(props.queryParams);
    const [value, setValue] = useState<string[]>(props.value ? props.value : [])
    const [searchValue, setSearchValue] = useState('');
    const [codes, setCodes] = useState<string[]>([]);
    const [roadNatures, setRoadNatures] = useState(props.roadNatures);
    const [open, setOpen] = useState(false);
    // const [height, setHeight] = useState(isOpen ? "0px" : "auto");
    const [allGroups, setAllGroups] = useState<IndexBarDataNode[]>(props.allGroups ? props.allGroups : [])
    const [loading, setLoading] = useState<boolean>(false)

    useEffect(() => {

    }, [])

    useEffect(() => {
        if (props.queryParams) {
            loadRoadDatas(props.queryParams)
        }
    }, [])

    useEffect(() => {
        setRoadNatures(props.roadNatures)
    }, [props.roadNatures])

    useEffect(() => {
        setAllGroups(props.allGroups ? props.allGroups : [])
    }, [props.allGroups])

    useEffect(() => {
        if (!Utils.isEqual(props.queryParams, queryParams)) {
            setQueryParams(props.queryParams)
            if (props.queryParams)
                loadRoadDatas(props.queryParams)
        }
    }, [props.queryParams])


    useEffect(() => {
        const value = props.value ? props.value : []
        setValue(value)
        const _codes = getRoadCodes(allGroups, value)
        setCodes(_codes)
    }, [props.value])

    const onSelect = (value: string[], codes: string[]) => {
        setValue(value)
        setCodes(codes)
        onSearch("")
        if (props.onChange) {
            props.onChange(value, codes)
        }
        if (!props.multiple) {
            setOpen(false)
        }
    }

    const onSearch = (value: string) => {
        setSearchValue(value)
    }

    const onDeselect = (_value: string) => {
        if (_value) {
            if (codes) {
                const index = codes.findIndex((data) => {
                    return data === _value
                })
                if (index > -1) {
                    const keys = JSON.parse(JSON.stringify(value))
                    keys.splice(index, 1)
                    const _codes = JSON.parse(JSON.stringify(codes))
                    _codes.splice(index, 1)
                    onSelect(keys, _codes)
                }
            }
        }
    }


    const onCodeChange = (codes: string[]) => {
        setCodes(codes)
    }

    const onKeyDown = (e: any) => {
        if (e.keyCode === 13) {
            if (props.onSearch) {
                props.onSearch(e.target.value)
            }
        }
    }

    const onLoad = () => {

    }


    const onDropdownVisibleChange = (visible: boolean) => {
        setOpen(visible)
    }


    function loadRoadDatas(queryParams: RoadQueryParamsExt) {
        setLoading(true)
        const { dataTimes, depts, techLevels, pavementTypes, } = queryParams
        if (!dataTimes || dataTimes.length === 0) {
            console.log("请输入数据时间")
            return;
        }

        const param: RoadQueryParamsExt = { dataTimes, depts, techLevels, pavementTypes }

        LoadRoadDatas(param, (datas) => {
            setLoading(false)
            const _datas = JSON.parse(JSON.stringify(datas))
            setAllGroups(_datas)
            if (value) {
                setCodes(getRoadCodes(_datas, value))
            }
        })
    }
    console.log(codes);

    return <Select
        size={props.size}
        style={props.style ? props.style : { width: "100%" }}
        placeholder={props.placeholder ? props.placeholder : "选择路线，可输入关键字检索！"}
        mode="tags"
        showArrow
        searchValue={searchValue}
        autoClearSearchValue
        value={codes}
        onKeyDown={onKeyDown}
        onDeselect={onDeselect}
        onSearch={onSearch}
        open={open}
        onDropdownVisibleChange={onDropdownVisibleChange}
        dropdownRender={menu => (
            <>
                <RoadCommonSelectCore  {...props} style={props.dropdownStyle} loading={loading} defaultSelectFirst={props.defaultSelectFirst} roadNatures={roadNatures} searchValue={searchValue} value={value} multiple={props.multiple} allGroups={allGroups} hideTag hideSearch onChange={onSelect} onCodeChange={onCodeChange} onLoad={onLoad} />
            </>
        )}
    >
    </Select>
};