city-picker 城市选择器
城市选择器组件(City selector component)是一种用于在用户界面上选择城市的UI组件。它允许用户从一组预定义的城市或地区列表中选择特定的城市。
Props参数
名称 | 类型 | 是否必传 | 默认值 | 描述 |
---|---|---|---|---|
value | string[] | 否 | - | |
data | ICityData[] | 否 | - |
示例
tsx
/* eslint-disable no-console */
import { View } from '@tarojs/components'
import { useState } from 'react'
import MMButton from '~/components/button'
import MMCityPicker, { ICityRsult } from '~/components/city-picker'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
export default () => {
const [cityValue, setCityValue] = useState<string[]>(['110000', '110001', '110109'])
const [result, setResult] = useState<ICityRsult[]>([])
const [visible, setVisible] = useState(false)
return (
<MMPageContainer title="城市选择器">
<PageDemoBlock title="使用">
<MMButton onClick={() => setVisible(true)}>点击选择</MMButton>
<View>{result.map((value) => value.label).join(',')}</View>
</PageDemoBlock>
<MMCityPicker
value={cityValue}
visible={visible}
onVisibleChange={setVisible}
onCancel={() => {
console.log('点击了取消')
}}
onOk={(data, result) => {
console.log(data, result)
setCityValue(data)
setResult(result)
}}
/>
<View className="spacing" />
</MMPageContainer>
)
}