React二级分类选择器

最新推荐文章于 2024-05-16 18:50:07 发布
最新推荐文章于 2024-05-16 18:50:07 发布
阅读量700 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42588966/article/details/105375170
版权

1. 结构

0(根品类)
	一级品类1
		二级品类1001
		二级品类1002
		二级品类1003
		二级品类1004
	一级品类2
		二级品类2001
		二级品类2002
		二级品类2003
		二级品类2004

2. 逻辑

(1) 页面一加载就去获取一级品类
(2) 当你没有选择一级品类的时候，二级品类不可见（隐藏）
(3) 当你选择了一级品类，就去立马获取和显示这个一级品类对应的所有二级品类

(4) 当你只选择了一级品类，那么商品就挂在一级品类，选择一级品类后要清空原来的二级品类，再去获取你新选择的一级品类下面所有的二级品类, 最后把结果暴露出去, 就是把选择的一级品类Id传给父组件

(5) 如果你选择了二级品类，那么商品就挂在二级品类，然后把结果暴露出去(二级categoryId覆盖一级categoryId,最终只会传出一个结果)

(6) 它最后给我们提供的就是一个分类的Id

(7) 在编辑的时候我们需要对它进行数据回填

  1. 因为它单独封装成组件, 所以数据的回填只能在这个组件内部进行回填, 不能在父组件
  2. 所以父组件需要通过props把需要回填的数据传给他
  3. 一般是当我们进入编辑页面的时候需要数据回填, 数据要父组件通过异步接口去拿
  4. 子组件想要拿到父组件异步获取的数据, 不能通过this.props, 需要在生命周期函数componentWillReceiveProps(nextProps)来获取, 数据在nextProps里面
  5. 这里也分: 接受的只有一级品类,还是一级品类+二级品类
  6. 如果有二级品类, 回填二级品类后还要去加载二级品类列表

3. 组件内部的状态

最低0.47元/天 解锁文章
上官不会飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-multiple-select:简单的多选组件，可用于本机
05-01
React本机多重选择 简单的multi-select组件，用于react-native（Select2用于react-native）。 重要通知 最近我一直在忙于工作和其他项目，因为我真的没有足够的时间致力于这个项目。 如果您想维护这个项目，可以给我。 谢谢。 安装 $ npm install react-native-multiple-select --save 或用纱 $ yarn add react-native-multiple-select 用法 注意：在使用此软件包之前，请确保为您的项目添加并配置 。 您可以克隆并试用应用程序，也可以尝试 下面的代码段显示了如何使用该组件 // import component import React , { Component } from 'react' ; import { View } from 'react-native'
react使用antd中的Checkbox实现多选
见贤思齐焉，见不贤内自省
12-28 6611
react使用antd中的Checkbox实现多选
react 联级选择器插入数据 实现最终渲染和提交
最新发布
hyy的博客
05-16 220
value: '设备问题',label: '设备问题',},value: '其他问题',label: '其他问题',])const [options1, setOptions1] = useState([]) // 存储res1const [options2, setOptions2] = useState([]) // 存储res2// 根据res1和res2的变化实时更新// 假设您在某个时机获取了res1和res2数据options,'设备问题',options1。
react-rdatepicker基于react的日历选择组件支持单选多选
08-15
r-date-picker 基于react的日历选择组件，支持单选，多选
react-antd选择器选择多属性传值
WebView
06-20 3484
1、使用Select选择器时，我们都知道能 使用value值将所选的属性获取。 默认根据此属性值进行筛选 function handleChange(value) { console.log(`selected ${value}`); } 2、但当我们需要获取多个属性值时，其实选择器也有可选属性供选择。 所以当我们需要获取多个属性值时，可将值赋予title与className 3、示例： return ( <Option value={index} title={
react-ant-design-Select多选选择器禁用选项处理&&选项数据处理
WebView
04-26 3701
1、 2、实现禁用部分选项 用到的是js的some方法 subjects.map(subject => { return ( <Option disabled={haveSelectSubject.some( id
React-Native-Tree-Selector:React Native多级选择器，中国省市选择器
04-06
React Native多级选择器，支持任意层级。 基础组件 采摘树 演示版 import structData from '../struct' ; export default function Example ( ) { const struct = { uniqueKey : 'key' , valkey : 'name' , ...
spring-picker2:react 的选项选择器组件，支持多级联动
04-28
移动端react选择器，支持多级联动 forked from 在原有的基础上优化了实现，更换了更清晰的数据格式，更好的交互体验。 特点 真实的3D滚轮，效果更接近原生，秒杀其它大多数picker组件:upside-down_face: 更合理的...
react-multi-select:React的多选组件
05-17
React多选组件 React多选组件 安装： npm install --save @khanacademy/react-multi-select yarn add @khanacademy/react-multi-select 用法： 有关如何使用该组件的信息，请参见/src/stories/index.js的示例，但...
react-sidemenu-seed:一个带有sidemenu的种子应用程序，包括：react，react-router-dom，redux
03-28
该项目使用进行了引导，并对其进行了构建，以添加带有侧菜单，路由机制的引导程序4，以支持第一级和第二级动态页面。 使用redux完成商店管理。 和使用thunk处理的axios进行ajax调用的副作用。 它有什么 ✓简单的侧...
PETSHOP-IFSP:ADS第二学期的高级Web开发课程项目。 *正在建设中*模拟虚拟宠物店的网站。 用ReactJS制成
05-25
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且...
react-native-segmented-picker:具有多列支持和可选本机依赖项的选择器选择器轮
05-02
React本机分段选择器 跨平台实现，用于创建动态的多维选择列表。 支持多种列和大小。 显示任何基于文本的内容，而不仅仅是。 适用于为构建的应用程序。 适用于iOS的可选本机扩展。 安装 $ yarn add react-native-segmented-picker # or # $ npm install --save react-native-segmented-picker 您也可以在此时设置本，但这不是强制性的。 用法 import React , { Component } from 'react' ; import SegmentedPicker from 'react-native-segmented-picker' ; class Example extends Component { constructor ( props ) { super (
reactnative实现的折叠列表二级列表展开点击时改变字体颜色
08-10
react native实现的 折叠列表，二级列表展开（ListView），点击时改变字体颜色
multiselect-react-dropdown:使用搜索和各种选项React多选下拉列表
04-28
React多选下拉 :collision: :collision: :collision: 用于组件延迟加载的React库。 小而高效。 :collision: :collision: :collision: 描述 一个React组件，提供具有多种功能的多选功能，例如选择限制，CSS自定义，复选框，搜索选项，禁用预选值，平面数组，用于辅助功能和分组功能的键盘导航。 它还具有像普通下拉菜单一样的功能（意味着单选下拉菜单）。 入门 1.安装 npm install multiselect-react-dropdown 2.演示 3.基本用法 import { Multiselect } from 'multiselect-react-dropdown' ; this . state = { options : [ { name : 'Srigar' , id : 1 } , { name : 'Sam' , id : 2 } ] } ; < Multiselect options = { t
react-React组件的css选择器
08-15
React组件的css选择器
基于react的地址选择器
04-10
基于react的地址选择器，纯js代码，不依赖其他第三方。
简单的用React+antd实现简单Select 下拉多级联动；
alonesupermen的博客
07-15 5405
##用React+antd实现简单Select 下拉多级联动； 1. 首先看state内的值 this.state = { select:[] , //1级下拉内容 select2:[], // 2级下拉内容 status:true, //2级禁用状态 select3:[], //3级下拉内容 select4:[], //4级下拉内容 } 2. -利用 comp
使用ant design遍历多选组件时，选择一个，所有便利的选择器都进行了选择。
weixin_69903461的博客
11-09 283
这是因为你遍历出来的选择器使用的是同一个state，若想解决此问题，把选择器写在一个组件里面，每个组件都有它独立的state，而不直接遍历选择器。
react-native可自定义联级选择器
Tuness的博客
09-01 768
可自定义联级选择器
react 二级菜单
11-01
但是，没有提供关于react二级菜单的具体信息。因此，我将为您提供关于react二级菜单的回答。 React是一个用于构建用户界面的JavaScript库。React中的组件可以轻松地创建和维护，这使得它成为构建复杂应用程序的理想...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值