cldV2react/src/components/LazyCascader/LazyCascader.jsx

import { Cascader } from 'antd'
import React, { forwardRef, useEffect } from 'react'
import { connect } from 'dva'

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

  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 (
    <Cascader
      placeholder="省/市/区"
      options={options}
      ref={refinstance}
      onChange={handleOnChange}
      loadData={loadData}
      fieldNames={{ label: 'name', value: 'id' }}
      changeOnSelect={changeOnSelect}
      {...resetProps}
    />
  )
}
const LazyCascader = connect(({ district }) => ({
  options: district.data
}))(CLazyCascader)
export default forwardRef((props, ref) => {
  return <LazyCascader {...props} refinstance={ref} />
})
// export default connect(({ district }) => ({
//   options: district.data
// }))(LazyCascader)