移动端 react + antd-mobile 二级联动（一二级均多选）

原创

已于 2022-09-30 15:58:06 修改 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-09-30 14:55:00 首次发布

本文介绍如何在移动端使用React和antd-mobile库创建一个二级联动选择功能。功能详细说明：数据以树形结构组织，包含一级ID，初始显示一级菜单。选择一级后，二级菜单显示对应的一级下的子项。用户最终可以查看并编辑所选的全部一级和二级选项，支持单个删除和全部清除。

前提：数据结构为树形结构（二级数据带一级ID）

功能说明：默认展示一级下拉菜单，选完一级之后，二级的列表数据为选好的所有一级的二级数据，最后点确定之后，展示全部的选择（包括一级和二级）。展示出来的部分可以删除及全部删除。

！！！注意注意：选了一级，没选择二级，会在最后点确定的时候带出全部的二级，如果这个一级下面选了二级，最后只会展示已选择的二级。

你需要准备的变量

  const [cascadeData, setCascadeData] = useState([] as any[]);// 品类的全部数据
  const [cascadeId, setCascadeId] = useState([] as string[]);// 选定的全部品类
  const [cascadeVisible, setCascadeVisible] = useState(false);// 一级品类
  const [secondVisible, setSecondVisible] = useState(false);// 二级品类
  const [secondLevel, setSecondLevel] = useState([]as any[]);// 二级列表
  const [selectCategory, setSelectCategory] = useState([] as any[]);// 选定的全部品类对象
  const [selectedFirstObj, setSelectedFirstObj] = useState([] as any[]);// 选定的一级品类
  const [selectedFirstId, setSelectedFirstId] = useState([] as any[]);// 选定的一级品类id
  const [selectedSecondObj, setSelectedSecondObj] = useState([] as any[]);// 选定的二级品类
  const [selectedSecondId, setSelectedSecondId] = useState([] as any[]);// 选定的二级品类id

页面结构

 <Space>
	<div
	  onClick={
   
   () => {
   
   
	    setCascadeVisible(true);
	  }}
	  className={
   
   style.cascadeBtn}
	>
	  {
   
   selectedFirstId.length ? 
	    `已选${
     
     selectedFirstId.length}` : '一级品类'} <DownOutline />
	  {
   
   /* 一级品类 <DownOutline /> */}
	</div>
	{
   
   !!secondLevel.length && 
	  <div
	    onClick={
   
   () => {
   
   
	      setSecondVisible(true);
	    }}
	    className={
   
   style.cascadeBtn}
	  >
	    {
   
   selectedSecondId.length ? 
	      `已选${
     
     selectedSecondId.length}` : '二级品类'} <DownOutline />
	    {
   
   /* 二级品类 <DownOutline /> */}
	  </div>}
	{
   
   !!secondLevel.length && 
	  <Button
	    color="primary"
	    size="mini"
	    onClick={
   
   () => handlerSelectLevel()}
	  >确定
	  </Button>

最低0.47元/天解锁文章