4.基于antd_mobile_Picker使用

需求:实现级联的位置选择

分析:在使用时，完全根据案列的数据结构去实现，其数据源数组的第一项数组为级联的第一个，第二个位级联的第二个。首先进入页面时需要掉接口，并根据第一个数组的第一项掉接口，请求到第二个数据源后达到初始化展示的效果。在onSelect事件中监听，如果第一个发生改变，重新请求第二个数据。

代码实现:公共组件，可直接使用

    import { useEffect, useState } from 'react';
    import styles from './index.less';
    import { Picker, Space } from 'antd-mobile';
    import { DownOutline} from 'antd-mobile-icons';
    import { history, useDispatch, useSelector } from 'umi';
    const Address = (props) => {
      const { value } = props // 会议变更传过来的值
      const dispatch = useDispatch();
      const [basicColumns, setBasicColumns] = useState([])
      const [cityList, setCityList] = useState([])
      const locationCity = useSelector((state) => state.meetingProve.locationCity)
      const localAddress = useSelector((state) => state.meetingProve.localAddress)


      useEffect(() => {
        getLocationCity()
      }, []);
      useEffect(() => {
        if(cityList.length != 0){
          let saveData = [];
          let transData = JSON.parse(JSON.stringify(cityList))
          transData.forEach(item => {
            let middleData = {}
            middleData.label = item.officeLocation
            middleData.value = item.officeLocation
            middleData.id = item.id
            saveData.push(middleData)
          })
          setBasicColumns([[...locationCity],[...saveData]])
        }
      },[cityList])
      const getLocationCity = ()=> {
        dispatch({
          type: 'meetingProve/getLocationCity',
          payload: '',
        }).then(res => {
          if(res && res?.data.length !=0){
            dispatch({
              type: 'meetingProve/getLocationListAll',
              payload: {
                city : res.data[0]
              },
            }).then(resData => {
              let saveData = [];
              resData.data.forEach(item => {
                let middleData = {}
                middleData.label = item.officeLocation
                middleData.value = item.officeLocation
                middleData.id = item.id
                saveData.push(middleData)
              })
              setBasicColumns([[...locationCity],[...saveData]])
            })
          }
        })
      }

      return (
        <div className={styles.address}>
            <img style={{width: '16px', height: '16px', marginRight: '6px', marginBottom: '4px'}} src={require('../../assets/appoint/appointSite.png')}></img>
            <Picker
              columns={basicColumns}
              onConfirm={(val, extend) => {
                // 保存地址
                dispatch({
                  type: 'meetingProve/saveAddress',
                  payload: val
                })
                // 保存所选择的id
                dispatch({
                  type: 'myAppointment/saveAddressId',
                  payload: extend.items[1].id
                })
              }}
              onSelect={(val) => {
                dispatch({
                  type: 'meetingProve/getLocationListAll',
                  payload: {
                    city: val[0]
                  },
                }).then(res => {
                  if(res) {
                    setCityList(res.data)
                  }
                })
              }}
            >
              {(items, { open }) => {
                return (
                  <Space align="center">
                    <div onClick={() => {open();}} className={value ?  styles.meetingDetail :styles.addressDetail}>
                      {items.every((item) => item === null)
                        ? ( localAddress.length !=0 ? localAddress.join('  ') : value ? value : '请选择地址')
                        : items.map((item) => item?.label ?? (localAddress.length !=0 ? localAddress.join('  ') : value ? value : '请选择地址')).join('  ')}
                    </div>
                  </Space>
                );
              }}

            </Picker>
            <DownOutline style={{marginLeft: '6px'}} fontSize={12} color='#666666'/>
        </div>
      );
    };

    export default Address;