Ant Design 基于dropdownRender属性对下拉菜单的封装

最新推荐文章于 2024-07-30 11:11:00 发布

栖北

最新推荐文章于 2024-07-30 11:11:00 发布

阅读量3k

点赞数 1

分类专栏：功能组件 Ant Design react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/weixin_45945214/article/details/126858478

版权

该博客展示了如何在React应用中使用Ant Design的Select组件来实现具有多级子菜单的选择功能。代码详细解释了如何初始化数据的勾选状态、处理数据变化以及更新选项的勾选状态。同时，文章提供了使用示例，说明了如何处理数据映射和传递给Select组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { useEffect, useState } from "react";
import { Select ,Checkbox,Menu } from "antd";
import _ from 'lodash';
import { nanoid } from "nanoid";

const MemuSelectSimple = props => {
  const {data, dataOptions,dataOptionsMap,onChange} = props 
  const [options,setOptions]  = useState([])

// 用于初始化数据勾选状态
const optionsChange = (data,options) => {
    const tempOptions = _.cloneDeep(options)
    const resOptions = tempOptions.map(item=>{
        if(data.includes(item.value)){
           item.checked = true
        }
        let count = 0
        item.children?.map(subItem=>{
            if(data.includes(subItem.value)){
               subItem.checked= true
               count ++
            }
            return subItem
        })
        if(item.children && item.children.length){
           if(!count){
               item.checked=false
               item.indeterminate=false
           }else if (item.children.length===count){
               item.checked=true
               item.indeterminate=false
           }else{
               item.checked=false
               item.indeterminate=true
           }
        }
       return item
    })
    return resOptions
}



useEffect(()=>{
    const tempOptions = optionsChange(data,dataOptions)
    setOptions(tempOptions)
},[])

useEffect(()=>{
    console.log('data',data);
},[data])

 const handleChange = option => {
     // 全部清空 []
     if(!option.length){
        onChange([])
        setOptions(dataOptions)
        return
     }
     // 部分清空
     const optionsMapKeys = Object.keys(dataOptionsMap).map(item=>+item)
     const optionsMapValues = Object.values(dataOptionsMap)
     let optionsValue = []
     optionsMapValues.forEach((item,index)=>{
        if(option.

最低0.47元/天解锁文章