cldV2react/src/components/LazyCascader/LazyCascader.jsx

import { Cascader } from 'antd'
import React, { forwardRef, useEffect } from 'react'
import { connect } from 'umi'
import styles from './index.less'

const CLazyCascader = props => {
  const { refinstance, options, dispatch, onChange, changeOnSelect = false, ...resetProps } = props
  useEffect(() => {
    if (!options.length) {
      dispatch({
        type: 'district/fetch'
      })
    }
  }, [])

  const triggerChange = (value, local = '') => {
    if (onChange) {
      onChange(value, local)
    }
  }
  const handleOnChange = (value, selectedOptions) => {
    const local = selectedOptions.reduce((prev, curr) => {
      return `${prev}${prev ? ',' : ''}${curr.name}`
    }, '')
    triggerChange(value, local)
  }

  const loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1]
    targetOption.loading = true

    // load options lazily
    dispatch({
      type: 'district/fetch',
      payload: { parentId: targetOption.id, level: targetOption.level }
    })
  }

  return (
    <div className={styles.cascader}>
      <Cascader
        getPopupContainer={triggerNode => triggerNode.parentNode}
        placeholder="省/市/区"
        options={options}
        ref={refinstance}
        onChange={handleOnChange}
        loadData={loadData}
        fieldNames={{ label: 'name', value: 'id' }}
        changeOnSelect={changeOnSelect}
        {...resetProps}
      />
    </div>
  )
}
const LazyCascader = connect(({ district }) => ({
  options: district.data
}))(CLazyCascader)
export default forwardRef((props, ref) => {
  return <LazyCascader {...props} refinstance={ref} />
})