Picker 选择器

最新推荐文章于 2024-04-19 11:10:55 发布
最新推荐文章于 2024-04-19 11:10:55 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： React相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/116230381
版权

Picker 选择器

在这里插入图片描述

层级选择

使用Ant Design Mobile

Ant Design Mobile

数据项

const province = [
        {
            label: "北京",
            value: "01",
            children: [
                {
                    label: "东城区",
                    value: "01-1",
                },
                {
                    label: "西城区",
                    value: "01-2",
                },
                {
                    label: "崇文区",
                    value: "01-3",
                },
                {
                    label: "宣武区",
                    value: "01-4",
                },
            ],
        },
        {
            label: "浙江",
            value: "02",
            children: [
                {
                    label: "杭州",
                    value: "02-1",
                    children: [
                        {
                            label: "西湖区",
                            value: "02-1-1",
                        },
                        {
                            label: "上城区",
                            value: "02-1-2",
                        },
                        {
                            label: "江干区",
                            value: "02-1-3",
                        },
                        {
                            label: "下城区",
                            value: "02-1-4",
                        },
                    ],
                },
                {
                    label: "宁波",
                    value: "02-2",
                    children: [
                        {
                            label: "xx区",
                            value: "02-2-1",
                        },
                        {
                            label: "yy区",
                            value: "02-2-2",
                        },
                    ],
                },
                {
                    label: "温州",
                    value: "02-3",
                },
                {
                    label: "嘉兴",
                    value: "02-4",
                },
                {
                    label: "湖州",
                    value: "02-5",
                },
                {
                    label: "绍兴",
                    value: "02-6",
                },
            ],
        },
    ];

api

在这里插入图片描述

实现代码

import React, { useState } from "react";
import { Picker, List } from "antd-mobile";
import "antd-mobile/dist/antd-mobile.css";

export default function Index() {
    const defdata = {
        data: [],
        cols: 1,
        pickerValue: [],
        asyncValue: [],
        gradesValue: [],
        visible: false,
        visible2: false,
        colorValue: ["#00FF00"],
        antdDistrict: [],
    };
    const [value, setValue] = useState(defdata);
    const province = [
        {
            label: "北京",
            value: "01",
            children: [
                {
                    label: "东城区",
                    value: "01-1",
                },
                {
                    label: "西城区",
                    value: "01-2",
                },
                {
                    label: "崇文区",
                    value: "01-3",
                },
                {
                    label: "宣武区",
                    value: "01-4",
                },
            ],
        },
        {
            label: "浙江",
            value: "02",
            children: [
                {
                    label: "杭州",
                    value: "02-1",
                    children: [
                        {
                            label: "西湖区",
                            value: "02-1-1",
                        },
                        {
                            label: "上城区",
                            value: "02-1-2",
                        },
                        {
                            label: "江干区",
                            value: "02-1-3",
                        },
                        {
                            label: "下城区",
                            value: "02-1-4",
                        },
                    ],
                },
                {
                    label: "宁波",
                    value: "02-2",
                    children: [
                        {
                            label: "xx区",
                            value: "02-2-1",
                        },
                        {
                            label: "yy区",
                            value: "02-2-2",
                        },
                    ],
                },
                {
                    label: "温州",
                    value: "02-3",
                },
                {
                    label: "嘉兴",
                    value: "02-4",
                },
                {
                    label: "湖州",
                    value: "02-5",
                },
                {
                    label: "绍兴",
                    value: "02-6",
                },
            ],
        },
    ];

    const onOk = (value) => {
        console.log(value);
        setValue({ gradesValue: value });
    };

    return (
        <div>
            <List style={{ backgroundColor: "white" }} className="picker-list">
                <Picker
                    visible={value.visible2}
                    data={province}
                    title="选择"
                    extra="请选择(可选)"
                    // cascade={false}
                    value={value.gradesValue}
                    onChange={(v) => setValue({ gradesValue: v })}
                    onOk={(v) => onOk(v)}>
                    <List.Item
                        arrow="horizontal"
                        onClick={() => setValue({ visible2: true })}>
                        Multip
                    </List.Item>
                </Picker>
            </List>
        </div>
    );
}

这里，因为项目使用trao开发小程序

避免引入更多依赖，这里使用两列处理

当然了，按需导入组件，也是没啥问题的

在这里插入图片描述

下面是具体代码

<View className="drawer-item selected">
                <View className="drawer-item-key">客户分类</View>
                <View>
                    <Picker
                        mode="multiSelector"
                        range={[grades.col1, grades.col2]}
                        rangeKey="name"
                        onChange={e => chooseMultiSelector(e)}
                        onColumnChange={e => chooseColumnMultiSelector(e)}
                    >
                        <View>{gradeChoose || '全部'}</View>
                    </Picker>
                </View>
            </View>

const chooseMultiSelector = e => {
        const first = grades.col1[e.detail.value[0]];
        const last = grades.col1[e.detail.value[1]];
        const idArry = [first.id, last.id].filter(el => !!el);

        if (idArry.length !== 0) {
            setGradeChoose(`${first.name}/${last.name}`);
            handleFilterParamsChange('classify_id', idArry[idArry.length - 1]);
        } else {
            setGradeChoose(undefined);
            handleFilterParamsChange('classify_id', '');
        }
    };
    const chooseColumnMultiSelector = e => {
        if (e.detail.column === 0) {
            // 判断第1列value值省发生了变化
            const index = e.detail.value;
            if (
                grades.col1[index].sub_client_classifies &&
                grades.col1[index].sub_client_classifies.length > 0
            ) {
                const newData = grades.col1[index].sub_client_classifies.filter(
                    el => el.id !== null,
                );
                newData.unshift({
                    id: null,
                    name: '全部',
                });
                setGrades({
                    ...grades,
                    col2: newData,
                });
            }
        } else if (e.detail.column === 1) {
            // const index = e.detail.value;
            // if (grades.col1[index].child && grades.col1[index].child.length > 0) {
            //     setGrades({
            //         col2: grades.col1[index].sub_client_classifies,
            //     });
            // }
        }
    };

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { View, Picker } from '@tarojs/components';
import { AtDrawer, AtButton } from 'taro-ui';
import customerServices from '../../services/customerProfileList';
import Taro, { useDidShow } from '@tarojs/taro';

export default function Filter() {
    const dispatch = useDispatch();
    const { drawerShow, filterParams, customergetStructure } = useSelector(
        state => state.customerProfileList,
    );
    const defaultGrades = {
        gradeStart: [],
        gradesOther: [],
        col1: [],
        col2: [],
        col3: [],
    };
    const [grades, setGrades] = useState(defaultGrades);
    const [gradeChoose, setGradeChoose] = useState();

    useDidShow(() => {
        // TODO获取经营组数据
        dispatch({
            type: 'customerProfileList/getCustomergetStructure',
        });

        const defauleGrades = [
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 30,
                name: 'A类',
                pid: null,
                sort: 3,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A1-1类',
                        pid: 30,
                        sort: 1,
                        updated_at: '2021-04-23 11:50:39',
                        sub_client_classifies: [
                            {
                                created_at: '2021-04-02 16:20:45',
                                deleted_at: null,
                                id: 19,
                                name: 'A1-2类',
                                pid: 30,
                                sort: 1,
                                sub_client_classifies: [],
                                updated_at: '2021-04-23 11:50:39',
                            },
                        ],
                    },
                ],
            },
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 31,
                name: 'ABI类',
                pid: null,
                sort: 4,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A2类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                ],
            },
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 31,
                name: '第三项',
                pid: null,
                sort: 4,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A3类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A3-1类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                ],
            },
        ];
        if (defauleGrades.length > 0) {
            defauleGrades.unshift({
                id: null,
                name: '全部',
                sub_client_classifies: [
                    {
                        id: null,
                        name: '全部',
                    },
                ],
            });
            if (defauleGrades[0].sub_client_classifies) {
                setGrades({
                    ...grades,
                    col1: defauleGrades,
                    col2: defauleGrades[0].sub_client_classifies,
                });
                return;
            }
            setGrades({
                ...grades,
                col2: defauleGrades[0].sub_client_classifies,
                col1: defauleGrades,
            });
        }
    });
    const handleFilterParamsChange = (key, value) => {
        dispatch({
            type: 'customerProfileList/updateStateProps',
            payload: {
                name: 'filterParams',
                value: {
                    [key]: value,
                },
            },
        });
    };

    const chooseMultiSelector = e => {
        const first = grades.col1[e.detail.value[0]];
        const last = grades.col1[e.detail.value[1]];
        const idArry = [first.id, last.id].filter(el => !!el);

        if (idArry.length !== 0) {
            setGradeChoose(`${first.name}/${last.name}`);
            handleFilterParamsChange('classify_id', idArry[idArry.length - 1]);
        } else {
            setGradeChoose(undefined);
            handleFilterParamsChange('classify_id', '');
        }
    };
    const chooseColumnMultiSelector = e => {
        if (e.detail.column === 0) {
            // 判断第1列value值省发生了变化
            const index = e.detail.value;
            if (
                grades.col1[index].sub_client_classifies &&
                grades.col1[index].sub_client_classifies.length > 0
            ) {
                const newData = grades.col1[index].sub_client_classifies.filter(
                    el => el.id !== null,
                );
                newData.unshift({
                    id: null,
                    name: '全部',
                });
                setGrades({
                    ...grades,
                    col2: newData,
                });
            }
        } else if (e.detail.column === 1) {
            // const index = e.detail.value;
            // if (grades.col1[index].child && grades.col1[index].child.length > 0) {
            //     setGrades({
            //         col2: grades.col1[index].sub_client_classifies,
            //     });
            // }
        }
    };

    const handleDrawerClose = () => {
        dispatch({
            type: 'customerProfileList/overrideStateProps',
            payload: {
                drawerShow: false,
            },
        });
    };

    const submit = () => {
        dispatch({
            type: 'customerProfileList/getCustomerList',
        });
        handleDrawerClose();
    };

    const resetC = () => {
        dispatch({
            type: 'customerProfileList/overrideStateProps',
            payload: {
                filterParams: {},
            },
        });
        dispatch({
            type: 'customerProfileList/getCustomerList',
        });
        handleDrawerClose();
    };
    const chooseCopy = type => {
        Taro.navigateTo({
            url: '../handler/index',
            events: {
                setData(key, data) {
                    const name = `${type}_name`;
                    const id = `${type}_id`;
                    handleFilterParamsChange(name, data.name);
                    handleFilterParamsChange(id, data.id);
                },
            },
        });
    };

    return (
        <AtDrawer className="drawer" show={drawerShow} right mask onClose={handleDrawerClose}>
            <View className="drawer-item selected">
                <View className="drawer-item-key">审批状态</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customerServices.STATUS_MAP}
                        rangeKey="value"
                        onChange={e => {
                            handleFilterParamsChange(
                                'approve_state',
                                customerServices.STATUS_MAP[e.detail.value].key,
                            );
                        }}
                    >
                        <View>{customerServices.STATUS[filterParams.approve_state] || '全部'}</View>
                    </Picker>
                </View>
                <View>{customerServices.STATUS[filterParams.status]}</View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">业务阶段</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customerServices.BUSINESSSTAGE_MAP}
                        rangeKey="value"
                        onChange={e => {
                            handleFilterParamsChange(
                                'current_phase_id',
                                customerServices.BUSINESSSTAGE_MAP[e.detail.value].key,
                            );
                        }}
                    >
                        <View>
                            {customerServices.BUSINESSSTAGE[filterParams.current_phase_id] ||
                                '全部'}
                        </View>
                    </Picker>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">经营组</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customergetStructure}
                        rangeKey="name"
                        onChange={e => {
                            handleFilterParamsChange(
                                'operations_group_id',
                                customergetStructure[e.detail.value].id,
                            );
                        }}
                    >
                        <View>
                            {filterParams.operations_group_id
                                ? customergetStructure.find(
                                      el => el.id === filterParams.operations_group_id,
                                  )?.name
                                : '全部'}
                        </View>
                    </Picker>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">客户分类</View>
                <View>
                    <Picker
                        mode="multiSelector"
                        range={[grades.col1, grades.col2]}
                        rangeKey="name"
                        onChange={e => chooseMultiSelector(e)}
                        onColumnChange={e => chooseColumnMultiSelector(e)}
                    >
                        <View>{gradeChoose || '全部'}</View>
                    </Picker>
                </View>
            </View>

            <View className="drawer-item selected">
                <View className="drawer-item-key">负责人</View>
                <View
                    className="drawer-item-value drawer-item-value_in-access"
                    onClick={() => {
                        chooseCopy('principal');
                    }}
                >
                    <View className={filterParams.principal_name ? 'drawer-item-value_active' : ''}>
                        {filterParams.principal_name || '请选择'}
                    </View>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">当前审批人</View>
                <View
                    className="drawer-item-value drawer-item-value_in-access"
                    onClick={() => {
                        chooseCopy('approver');
                    }}
                >
                    <View className={filterParams.approver_name ? 'drawer-item-value_active' : ''}>
                        {filterParams.approver_name || '请选择'}
                    </View>
                </View>
            </View>

            <View className="drawer-btn">
                <AtButton className="drawer-btn-reset" onClick={resetC}>
                    重置
                </AtButton>
                <AtButton className="drawer-btn-submit" type="primary" onClick={submit}>
                    确定
                </AtButton>
            </View>
        </AtDrawer>
    );
}
waillyer
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vant组件Picker 选择器选单选问题
01-18
1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ <van title=性别 value=user.gender click=isEditGenderShow></van> <!-- 编辑用户性别 --> <van-action-sheet v-model=isEditGenderShow :actions=actions cancel-text=取消 close-on-c
vue学习之mintui picker选择器实现省市二级联动示例
01-19
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例，分享给大家，具体如下： Mint UI 使用文档：https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍：https://mint-ui.github.io/docs/#/zh-cn2/popup Picker选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/picker Datetime picker日期选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker
微信小程序实现自定义picker选择器弹窗内容
01-03
微信小程序中定义好的几种picker选择器，不管是日期选择器还是地区选择器，或是其他的都有定死的样式和内容。 例如： 但是大多数开发程序的情况下还是需要自己写样式的，或是内容的。 例如： wxml <button class=free-btn bindtap=toggleDialog> 选定国家：{{value}} </button> <view class=free-dialog {{ showDialog ? 'f
lb-picker选择器示例.rar
02-18
uni-app picker选择器
antd picker组件 全国省市县数据
09-18
最新的全国省市县数据 数据格式[{ "label": "北京市", "value": "110000", "children": [{ "label": "北京市", "value": "110100", "children": [{ "label": "东城区", "value": "110101", "children": [] }] }] }]
【微信小程序】选择器组件picker
热门推荐
Fangyechy的博客
11-01 1万+
微信小程序之选择器组件picker
基于Ant Design Mobile封装地址编辑，选择
qq_57479640的博客
09-06 597
基于Ant Design Mobile封装地址编辑，选择，收货地址。
antd-mobile 选择器PickerView的使用
你，若盛开的专栏
10-24 1404
jsx import React, { PureComponent } from 'react'; import { PickerView, Button, Toast } from 'antd-mobile'; import { Icon } from "antd"; import func from '../../util/commonFunc'; import { hashHistory } from "react-router"; import styles from './style1.le.
结合antd-mobile选择器的行政区三级联动组件
dk123sw的博客
10-12 1万+
（ 如果前面失效 链接: https://pan.baidu.com/s/1oqdihRVTknM_AdzX31oZzg 提取码: 54qx ）把上面下载的json文件放到下面同级文件夹下 参考这句引用let districtData = require('./location');老实说实现方法很简单，antd-mobile提供了组件，只是没提供国家行政区数据，我只是把数据‘交给’这个组件罢了。这里使用的是国家标准(GB/T2260)，也就是2016年的标准行政区。如果大佬有最新的数据，希望能分享一下。
Pickers（选择器）
莫高雷草原
04-18 1261
选择器 Android为用户提供了现成的选择时间或日期的对话框控件。每种选择器提供了可选择每一部分时间（时，分，上午/下午）或日期（月，日，年）的控件。使用这些选择器有助于确保用户可以选择有效的、格式正确的且适用于用户所在地区的时间或日期。 我们建议你使用 DialogFragment 来承载每个时间或日期选择器。DialogFragment 可以为你管理对话框的生命周期，并且
antd-mobile中页面更新导致picker自动刷新的问题
关中刀客在青岛
05-13 1008
由于界面自动刷新，尤其是开了延时后刷新频繁，会导致picker打开后选中的条目自动回到当前value上，此时需禁止自动更新。 如下，在打开picker时，通过onVisibleChange (列改变回调)设置一个临时的tempPickerVal，界面显示期间一直用这个值，点击确定时调用onChange再设置当前pickerVal。 state = { isPickerShow: false, tempPickerVal: '' } onVisibleChange = (pickerVal
picker选择器自定义使用
最新发布
weixin_59527403的博客
04-19 145
picker选择器自定义使用
antd-mobile中Picker选项更新的问题
关中刀客在青岛
02-10 913
如图，Picker按钮上显示的数值是设备的设定温度，可以在点击后通过弹窗选项来修改这个设定温度。同时，设备端或其他手机端也可以修改这个温度，所以这个设定温度是随着设备的实际状态而实时变化的。每次打开弹窗时，选中项和当前显示的应该一致，即设备实际设定温度。
怎么修改antd mobile中picker样式_教程27——antd 的配置
weixin_39776991的博客
11-20 1832
前言：用的较多的一个 ui 框架就是 atn.design Ant Design - 一套企业级 UI 设计语言和 React 组件库​ant.design一、什么是 antd 及用法antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。特性： 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 React 组件。 使用 Typ...
使用antd-mobile的PickerView实现一个跨天时间选择器
关中刀客在青岛
02-27 1610
需求逻辑 今天到明天预约时间范围是下一分钟开始往后的24小时 切换每列数据时，其他列对应的数据要自动切换到合适的范围 每次打开预约开关时，预约的数据列表及时更新 antd-mobile的PickerView组件有个bug：在onChange事件中切换数据源后，有时可以自动再次触发onChange以获取正确的值，但有时不会。所以这里在每次切换数据源后，根据情况手动获取picker的值以进行修正 完成效果如下： 组件代码 import { useState, useEffect } from 'reac
【微信小程序】进阶篇 -- 表单组件 - picker 实现日期选择器（五十三）
JMFive的博客
04-07 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第53篇文章;今天开始学习微信小程序的第40天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
Antd-mobile UI库基础教程
06-03
针对React框架打造的移动端UI组件库，讲解细致，适用于初学者，快速上手实战操作，应对企业级开发
React-Native种使用antd-mobile的Picker时出现的异常报错
xjl271314的博客
05-07 3302
场景： 在使用Picker组件时，修改用户的性别，后台的返回数据是这样的： data:{ code:1, gender:'男' } React-native界面是这样的： import React from 'react' import { View } from 'react-native' import { List, InputItem, Picker...
picker 选择器
07-27
您好！关于选择器（Picker），它是一种用户界面元素，用于从预定义选项列表中选择一个值。它通常用于移动应用程序或网页中的表单或设置页面。 选择器有多种类型，包括下拉选择器（Dropdown Picker）和滚动选择器（Wheel Picker）。下拉选择器显示一个下拉列表，用户可以点击并选择一个选项。滚动选择器则允许用户通过滚动手势来选择值，通常以滚动轮或滚动条的形式呈现。 选择器的选项可以是文本、数字、日期、时间、颜色等等，具体取决于应用程序的需求。选择器的目的是提供一个直观且易于操作的方式，使用户能够从多个选项中快速选择所需的值。 希望这个简单的解释能够回答您的问题！如果您还有其他问题，我会很乐意为您解答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值