picker 选择器

选择器组件（Selector component）是一种用于在用户界面上选择或输入特定选项的UI组件。它可以用于从一组预定义选项中选择、输入文本、选择日期等操作。

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	否	-	是否显示
onOk	IMMPickerProps['onChange']	否	-	点击确定

示例

/* eslint-disable no-console */
import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import MMPicker from '~/components/picker'
import MMButton from '~/components/button'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  return (
    <MMPageContainer title="选择器">
      <CommonPicker />
      <MultiPicker />
    </MMPageContainer>
  )
}

function CommonPicker() {
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState<string[]>(['周四'])

  const data = ['周一', '周二', '周三', '周四', '周五'].map((label) => ({ label, value: label }))

  return (
    <>
      <PageDemoBlock title="基础使用">
        <MMButton onClick={() => setVisible(true)}>点击选择</MMButton>
        <Text>选择了: {value.join(',')}</Text>
      </PageDemoBlock>
      <MMPicker
        visible={visible}
        value={value}
        data={data}
        onVisibleChange={setVisible}
        onChange={(va, result) => {
          console.log(va)
          setValue(va)
        }}
      />
    </>
  )
}

function MultiPicker() {
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState(['福建', '厦门'])

  const data = [
    {
      value: '浙江',
      children: [
        {
          value: '杭州',
          children: [{ value: '西湖区' }, { value: '余杭区' }]
        },
        {
          value: '温州',
          children: [{ value: '鹿城区' }, { value: '瓯海区' }]
        }
      ]
    },
    {
      value: '福建',
      children: [
        {
          value: '福州',
          children: [{ value: '鼓楼区' }, { value: '台江区' }]
        },
        {
          value: '厦门',
          children: [{ value: '思明区' }, { value: '海沧区' }]
        }
      ]
    }
  ]

  return (
    <>
      <PageDemoBlock title="级联选择">
        <View>选择器组件支持传入级联数据。形成级联选择。下面是一个城市选择示例</View>
        <MMButton onClick={() => setVisible(true)}>点击选择</MMButton>
        <Text>{value.join('/')}</Text>
      </PageDemoBlock>
      <MMPicker
        visible={visible}
        value={value}
        data={data}
        title="请选择地区"
        // 这里 标签显示字段映射为label
        fieldKey={{ label: 'value' }}
        onVisibleChange={setVisible}
        onChange={(va) => {
          setValue(va)
          console.log(va)
        }}
      />
    </>
  )
}