关于React的antd-mobile的select组件

最新推荐文章于 2023-01-06 14:25:49 发布
最新推荐文章于 2023-01-06 14:25:49 发布
阅读量667 收藏
点赞数
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1134/article/details/119399082
版权

关于React的antd-mobile的select组件

1、做声明：INomarSelectProps 的interface接口

2、const出来一个NomarSelectGroup ，将需要的数据从props定义出来

3、用useEffect监听一些值的变化，去控制选出来的数据和弹出层

4、按提交的时候，将数据以数组类型返回。

linjyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react——受控组件select基本使用
牟童的博客
08-19 2648
import React, { PureComponent } from 'react' export default class App extends PureComponent { constructor(){ super(); // 给默认选中orange this.state={ currentfruit:"orange" } } render() { return .
antd-mobile中Form.Item下放入选择组Selector后无法实现单选
关中刀客在青岛
03-22 493
Selector组件中举例了只选一个的情况，在onChange事件中判断如果当前选中为空的时候不让操作即可实现单选。antd-mobile中Form.Item下放入选择组Selector之后，多选是没问题的，也可以不选；按需求将以上两种情况组合后，奇迹发生了：选中的按钮再次点击会被取消。在Form表单的Item中放入选择组，但实现的是单选的交互效果。请根据实际情况自己选择。
antd-mobile下拉加载
weixin_57229715的博客
12-08 921
//state: hasMore: true, page: 1, listData: [] //方法 loadMore = async () => { const { listData, page } = this.state; const append = await this.getData(page + 1); const addList = [...listData, ...append.appendList]; this.setState({ .
antd-pro-select
04-19
antd-pro-select
Antd Select多选时，限制最大选择数
m0_45219210的博客
01-06 2098
Antd Select多选时，限制最大选择数
基于umi+antd-mobile的移动端项目模板
02-22
其次，antd-mobile是蚂蚁金服开发的基于React的移动端UI组件库，它是antd（Ant Design）的移动端版本。antd-mobile遵循Ant Design的设计哲学，提供了丰富且易于使用的组件，如按钮、表单、导航栏、列表等，帮助...
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
Ant Design Mobile RNAnt ...演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --saveoryarn add @sishuguojixuefu/antd-mobile-rn链接字体图标react-native link @ant-design/ico
react-mobx-antd-mobile-h5-dmall2.0:基于 react + antd-Mobile + mobx 构建的h5电商平台
05-06
关于此项目是 react + antd-moblie 构建的h5电商平台，所有的...antd-moblie项目运行git clone https://github.com/zhong-tsong/react-mobx-antd-mobile-h5-dmall2.0 cd react-mobx-antd-mobile-h5-dmall2.0 npm in
antd-mobile-react17:antd-mobile react17
05-25
而Antd-Mobile，作为蚂蚁金服开源的移动UI组件库，为React应用提供了丰富的移动端组件，使得开发高质量的移动应用变得更加便捷。本文将深入探讨Antd-Mobile与React17的结合使用，以及如何通过它们构建高效的移动端...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
antd mobile 复选框（checkbox）如何实现全选且不影响单选？
琞、小菜
05-14 5056
antd mobile 复选框（checkbox）如何实现全选？整体思路Checkbox API 整体思路 我们需要点击一个多选框，从而实现全选对应的所有的复选框，但是又不得影响想要单个选中的操作，为什么会有这个但是下面会说明。 Checkbox API 属性 说明 类型 默认值 defaultChecked 初始是否选中 Boolean 无 checked 指定当前是否选中 Boolean ...
解决初次使用webpack+antd-mobile时css不生效的问题
weixin_30709635的博客
03-02 344
　　前端这块，最火的是angular、react、vue。根据你具体的业务场景，选择合适的框架或者类库。以react为例，新建一个项目时， css组件按钮，图片轮播等组件，最好不要重复造轮子，选择业内规范的，拿来用就行。这里选了一个比较火的antd-mobile。类似移动端的 bootstrap，但是UI组件要比bootstr强大丰富，且专注于结合react使用。 具体使用，可以看官...
移动端 react + antd-mobile 二级联动（一二级均多选）
cs_dnm的博客
09-30 1686
移动端 react + antd-mobile 二级联动（一二级均多选） 前提：数据结构为树形结构（二级数据带一级ID） 功能说明：默认展示一级下拉菜单，选完一级之后，二级的列表数据为选好的所有一级的二级数据，最后点确定之后，展示全部的选择（包括一级和二级）。展示出来的部分可以删除及全部删除。
React封装APP端弹框筛选组件带div蒙层遮罩层
QC班长的博客
09-28 749
先看下效果：点击筛选，弹出框显示筛选面板，再点击确定关闭面板，取消遮罩层出。第三方依赖组件：antd-mobile、antd-mobile-icons。index.less样式代码。index.tsx代码。
antd-mobile中无法调用Picker、inputItem、datePicker等组件中的onChange回调函数
马娟的博客
03-07 4228
问题描述： 使用antd-mobile+rc-form做表单时，发现Picker等组件中的onChange回调函数用onChange={this.onChange}无法触发，封装的子组件无法像父组件传值。 注意：此处只是针对onChange的回调函数，其他回调函数依旧可以正常使用，因为，rc-form会获取onChange事件的变化来更新form表单里的值，导致此处像往常一样用onChange...
关于antd Select选择器
热门推荐
晴晴晴的博客
05-24 2万+
根据服务器端的值动态渲染 select的option值 在moddels里面直接处理数据 *getSiteOptionsAdmin({ payload }, { call, put }) { try { const { data } = yield call(notice.getSiteOptionsAdmin, payload); if (da...
antd-mobile-v2日期选择器
刻痕
01-19 3269
antd-mobile 常用的日期选择器，很多常用的地方需要用到。 官网文档：https://antd-mobile-v2.surge.sh/components/date-picker-cn/ 比较简单，直接看代码 引用： import React, { useState, useEffect } from 'react'; import { DatePicker } from 'antd-mobile'; import "./index.less"; // import CalendarIcon f
antd mobile (三) 集成highcharts--传统方式
飞天代码的博客
08-13 1213
highcharts是一套比较出名的图标组件，做了个集成展示，效果图： 第一步是安装highcharts组件cnpm i --save-dev highcharts第二步就是引入该组件：var Highcharts = require('highcharts');第三步：则就是在界面定义一个容器div，并为div设置相应的id <div className={styles.charDiv} id=
react项目的组件库antd-mobile
蜗牛的博客
09-20 7023
1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件，下面我来介绍一下他的用法： 2.按照官网http://beta.mobile.ant.design/docs/react/introduce-cn上的操作步骤： npm install antd-mobile@next --save3.在你的项目中的package.json文件里会有ant
react + antd-mobile 实现下拉多选具体代码
最新发布
05-25
下拉多选可以使用antd-mobile的CheckboxItem组件来实现。具体代码如下： ```jsx import React, { useState } from 'react'; import { List, Checkbox } from 'antd-mobile'; const CheckboxItem = Checkbox.CheckboxItem; const options = [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, { label: '选项4', value: '4' }, ]; const MultipleSelect = () => { const [selectedValues, setSelectedValues] = useState([]); const handleCheckboxChange = (value) => { const currentIndex = selectedValues.indexOf(value); const newValues = [...selectedValues]; if (currentIndex === -1) { newValues.push(value); } else { newValues.splice(currentIndex, 1); } setSelectedValues(newValues); }; return ( <List> {options.map((option) => ( <CheckboxItem key={option.value} checked={selectedValues.indexOf(option.value) !== -1} onChange={() => handleCheckboxChange(option.value)} > {option.label} </CheckboxItem> ))} </List> ); }; export default MultipleSelect; ``` 上面的代码中，我们定义了一个`options`数组来存储选项列表。然后使用`useState`来管理已选中的值，初始值为空数组。在`handleCheckboxChange`方法中，我们根据选项的值来判断它是否已经被选中，如果已经被选中，则从已选中的值数组中删除该值，否则将该值添加到已选中的值数组中。最后通过`setSelectedValues`更新已选中的值数组。 在渲染时，我们遍历选项列表，并为每个选项渲染一个`CheckboxItem`组件。我们使用`checked`属性来判断该选项是否已经被选中，使用`onChange`事件来处理选项的选择和取消选择操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值