快速导航×

分类
React/Next.js中实现列表项的动态选择与移动2025-12-01 14:32:02

react/next.js中实现列表项的动态选择与移动

本教程详细介绍了如何在React/Next.js应用中实现列表项在两个数组间的动态选择与移动功能。我们将探讨如何使用`useState`管理列表状态、确保数据更新的不可变性，并重点强调在处理列表渲染时，为每个列表项提供稳定且唯一的标识符（`key` prop）的重要性，以避免因数据重复或渲染机制导致的潜在问题。

在现代前端应用中，管理和操作列表数据是常见的需求，尤其是在需要用户从一个列表中选择项目并将其移动到另一个列表的场景。本教程将深入讲解如何在React或Next.js项目中，利用Hooks（如useState）和事件处理函数，实现这一功能，并着重强调在开发过程中容易被忽视的关键细节。

1. 核心概念与状态管理

实现列表项的动态移动，首先需要妥善管理两个列表的状态。在React中，useState是管理组件内部状态的理想选择。

1.1 定义列表状态

我们通常会使用两个状态变量来分别存储两个列表的数据。每个列表项都应该是一个包含必要属性的对象，例如一个唯一的id、显示文本text，以及一个用于标记是否被选中的isChecked布尔值。

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid'; // 用于生成唯一ID

// 定义列表项的类型
interface SerItem {
  id: string;
  url: string;
  text: string;
}

interface ListItem {
  ser: SerItem;
  search_engine_source: {
    search_engine: SearchEngine; // 假设 SearchEngine 是一个枚举类型
    detail: SearchEngineDetail; // 假设 SearchEngineDetail 是一个枚举类型
  };
  isChecked: boolean;
}

// 假设的枚举类型定义
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

function ListMover() {
  const [riskSummary, setRiskSummary] = useState<ListItem[]>([
    {
      ser: { id: '1', url: 'https://example.com', text: '株式会社ABC 退会/解約率 - ブログ' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '2', url: 'https://example.com', text: 'Longwebsitename|SampleSample|SampleSampleSampleSample...' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const [neutralSummary, setNeutralSummary] = useState<ListItem[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: 'title1' }, // 示例数据，确保text也唯一
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '4', url: 'https://example.com', text: 'title2' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', text: 'title3' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  // ... (后续的事件处理函数)

1.2 处理列表项选择

当用户点击列表中的某个项时，我们需要切换其isChecked状态。这需要一个事件处理函数，并且在更新状态时，必须遵循React的不可变性原则。这意味着我们不能直接修改原始数组或对象，而应该创建新的数组和对象。

  const handleRiskSummary = (index: number) => {
    // 创建一个新数组，避免直接修改原始状态
    const updatedListItems = [...riskSummary];
    // 创建一个新对象来更新特定项的isChecked属性
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setRiskSummary(updatedListItems);
  };

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setNeutralSummary(updatedListItems);
  };

在上述代码中，我们使用了展开运算符（...）来创建数组和对象的浅拷贝，然后只修改需要更新的部分，确保了状态更新的不可变性。

2. 实现列表项的移动逻辑

列表项的移动通常涉及两个主要步骤：识别被选中的项，然后将这些项从源列表移除并添加到目标列表。

2.1 从中立列表移动到风险列表（向右）

当用户点击“向右”按钮时，我们将neutralSummary中所有被选中的项移动到riskSummary。

  const handleArrowLineRightClick = () => {
    // 1. 筛选出neutralSummary中所有被选中的项
    const selectedItems = neutralSummary.filter((item) => item.isChecked);

    // 2. 创建新的riskSummary数组
    const updatedRiskSummary = [...riskSummary];

    // 3. 创建新的neutralSummary数组，只包含未被选中的项
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

    // 4. 将选中的项添加到updatedRiskSummary
    selectedItems.forEach((item) => {
      const newItem = {
        ...item, // 复制所有现有属性
        ser: { ...item.ser, id: uuidv4() }, // 为移动后的项生成新的唯一ID
        isChecked: false, // 移动后重置选中状态
      };
      updatedRiskSummary.push(newItem);
    });

    // 5. 更新状态
    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

2.2 从风险列表移动到中立列表（向左）

网易人工智能 网易人工智能

网易数帆多媒体智能生产力平台

网易人工智能 233 查看详情 网易人工智能

“向左”移动的逻辑与“向右”移动对称。

  const handleArrowLineLeftClick = () => {
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedNeutralSummary = [...neutralSummary];
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 同样生成新的唯一ID
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

    setNeutralSummary(updatedNeutralSummary);
    setRiskSummary(updatedRiskSummary);
  };

3. 关键注意事项：唯一标识符（key prop）的重要性

在上述代码逻辑中，我们已经确保了在移动项目时会生成新的uuidv4()作为id。这对于React列表渲染至关重要。React使用key prop来高效地识别列表中哪些项被添加、移除、更新或重新排序。每个列表项的key必须是稳定且唯一的。

3.1 为什么key是关键？

如果列表中的多个项具有相同的key，或者key在使用过程中发生变化，React将无法正确识别这些项，这可能导致：

  • 渲染错误或不一致： 列表项的顺序、选中状态或其他UI状态可能混乱。
  • 性能问题： React可能无法有效复用DOM元素，导致不必要的重新渲染。
  • 难以调试的Bug： 就像原始问题中描述的“选择多个数据时出现奇怪结果”，这通常是由于React在内部处理具有相同标识符的元素时产生了混淆。

3.2 原始问题分析与解决方案

根据原始问题描述，尽管代码逻辑在某些情况下有效，但在选择多个数据时会失败，而解决方案是确保列表项的text属性也具有唯一性。这暗示了以下可能性：

  1. List组件内部的key使用不当： 尽管我们在移动时生成了新的id，但如果渲染列表的List组件（在示例代码中未提供）没有正确地使用item.ser.id作为其key prop，或者在某些情况下回退到使用非唯一属性（如item.ser.text）作为key，那么当多个项的text相同时，就会出现问题。
  2. 视觉或交互上的混淆： 即使key使用正确，如果多个列表项在视觉上（例如它们的text内容）完全相同，用户在选择或查看时也可能感到混淆，导致操作上的“奇怪结果”。

最佳实践：

  • 始终为列表项提供一个稳定且全局唯一的id。 uuidv4()是生成此类ID的好方法。
  • 确保你的列表渲染组件（如示例中的List组件）将这个唯一id作为key prop传递给每个子项。

例如，如果你的List组件内部是这样渲染的：

// List.tsx (假设的List组件)
interface ListProps {
  listItems: ListItem[];
  listTitle: string;
  onChange: (index: number) => void;
}

const List: React.FC<ListProps> = ({ listItems, listTitle, onChange }) => {
  return (
    <div>
      <h3>{listTitle}</h3>
      <ul>
        {listItems.map((item, index) => (
          // 关键：使用 item.ser.id 作为 key
          <li key={item.ser.id} onClick={() => onChange(index)}>
            <input type="checkbox" checked={item.isChecked} readOnly />
            {item.ser.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

确保key={item.ser.id}是正确且高效的实践。

4. 完整代码示例（包含UI部分）

将所有逻辑整合到一起，并假设有一个简单的List组件和Button组件：

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// 定义列表项的类型
interface SerItem {
  id: string;
  url: string;
  text: string;
}

interface ListItem {
  ser: SerItem;
  search_engine_source: {
    search_engine: SearchEngine;
    detail: SearchEngineDetail;
  };
  isChecked: boolean;
}

// 假设的枚举类型定义
enum SearchEngine { GooglePc = 'GooglePc' }
enum SearchEngineDetail { Suggestion = 'Suggestion' }

// 假设的 List 组件
interface ListProps {
  listItems: ListItem[];
  listTitle: string;
  onChange: (index: number) => void;
}

const List: React.FC<ListProps> = ({ listItems, listTitle, onChange }) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px', minHeight: '200px' }}>
      <h4>{listTitle}</h4>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {listItems.map((item, index) => (
          // 确保使用 item.ser.id 作为 key
          <li key={item.ser.id} onClick={() => onChange(index)} style={{ cursor: 'pointer', padding: '5px', background: item.isChecked ? '#e0e0e0' : 'transparent' }}>
            <input
              type="checkbox"
              checked={item.isChecked}
              onChange={() => onChange(index)} // 确保checkbox点击也能触发onChange
              style={{ marginRight: '5px' }}
            />
            {item.ser.text} (ID: {item.ser.id.substring(0, 4)}...)
          </li>
        ))}
      </ul>
    </div>
  );
};

// 假设的 Button 组件
interface ButtonProps {
  onClick: () => void;
  iconName: string; // 例如 'ArrowLineRight', 'ArrowLineLeft'
  className?: string; // 样式类名
}

const Button: React.FC<ButtonProps> = ({ onClick, iconName, className }) => {
  return (
    <button
      onClick={onClick}
      style={{
        margin: '5px',
        padding: '10px 15px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
        ... (className === '!bg-secondary hover:!bg-neutral' ? { backgroundColor: '#6c757d' } : {}) // 模拟样式
      }}
    >
      {iconName}
    </button>
  );
};

// 假设的 Flex 组件，用于布局
const Flex: React.FC<{ direction: 'col' | 'row'; className?: string; alignItems?: 'center'; children: React.ReactNode }> = ({ direction, className, alignItems, children }) => {
  return (
    <div style={{ display: 'flex', flexDirection: direction === 'col' ? 'column' : 'row', alignItems: alignItems, ...(className?.includes('col-span-') ? { flex: 1 } : {}) }}>
      {children}
    </div>
  );
};


function App() {
  const [riskSummary, setRiskSummary] = useState<ListItem[]>([
    {
      ser: { id: '1', url: 'https://example.com', text: '风险项 A' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '2', url: 'https://example.com', text: '风险项 B' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const [neutralSummary, setNeutralSummary] = useState<ListItem[]>([
    {
      ser: { id: '3', url: 'https://example.com', text: '中立项 1' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '4', url: 'https://example.com', text: '中立项 2' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
    {
      ser: { id: '5', url: 'https://example.com', text: '中立项 3' },
      search_engine_source: { search_engine: SearchEngine.GooglePc, detail: SearchEngineDetail.Suggestion },
      isChecked: false,
    },
  ]);

  const handleRiskSummary = (index: number) => {
    const updatedListItems = [...riskSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setRiskSummary(updatedListItems);
  };

  const handleNeutralSummary = (index: number) => {
    const updatedListItems = [...neutralSummary];
    updatedListItems[index] = {
      ...updatedListItems[index],
      isChecked: !updatedListItems[index].isChecked,
    };
    setNeutralSummary(updatedListItems);
  };

  const handleArrowLineRightClick = () => {
    const selectedItems = neutralSummary.filter((item) => item.isChecked);
    const updatedRiskSummary = [...riskSummary];
    const updatedNeutralSummary = neutralSummary.filter(
      (item) => !item.isChecked,
    );

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 生成新的唯一ID
        isChecked: false,
      };
      updatedRiskSummary.push(newItem);
    });

    setRiskSummary(updatedRiskSummary);
    setNeutralSummary(updatedNeutralSummary);
  };

  const handleArrowLineLeftClick = () => {
    const selectedItems = riskSummary.filter((item) => item.isChecked);
    const updatedNeutralSummary = [...neutralSummary];
    const updatedRiskSummary = riskSummary.filter((item) => !item.isChecked);

    selectedItems.forEach((item) => {
      const newItem = {
        ...item,
        ser: { ...item.ser, id: uuidv4() }, // 生成新的唯一ID
        isChecked: false,
      };
      updatedNeutralSummary.push(newItem);
    });

    setNeutralSummary(updatedNeutralSummary);
    setRiskSummary(updatedRiskSummary);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
      <Flex direction="col" className="col-span-5 h-max">
        <List
          listItems={neutralSummary}
          listTitle="中立まとめ"
          onChange={handle

以上就是React/Next.js中实现列表项的动态选择与移动的详细内容，更多请关注其它相关文章！


# 列表中  # 谷歌seo快吗  # 扑来猫推广营销软件  # 寿光网站优化服务为先  # 景区旅游营销推广例子  # 网站建设配置  # 沈阳品牌网站建设选择  # 东莞专业的网站建设平台  # 福田网站优化报价表下载  # 如何优化网站隽拔易速达  # 147seo骗局吗  # 过程中  # 移除  # 创建一个  # 运算符  # react  # 是一个  # 文件上传  # 为空  # 网易  # 多个  # 为什么  # 前端应用  # google  # ai  # app  # go  # node  # 前端  # js 


相关栏目： 【 企业资讯168 】 【 行业动态20933 】 【 网络营销52431 】 【 网络学院91036 】 【 运营推广7012 】 【 科技资讯60970 】


相关推荐： 漫蛙网页登录入口 漫蛙漫画官方授权网址  BetterDiscord插件中安全更新用户简介的实践指南  sublime如何优雅地处理行尾空格_sublime自动清理多余空白字符配置  Excel文件在线转换快速入口 Excel在线格式转换网站  外媒分析《GTA6》定价：卖100美元可以但真没必要！  QQ邮箱网页版登录入口 QQ邮箱官方在线使用平台  小红书网页版入口链接分享 小红书官网直接进  taptap防沉迷怎么解除 taptap解除健康系统限制说明【2025最新】  CSS响应式网页如何实现主次模块比例自适应_flex-grow与flex-shrink调整  怎样更改Windows系统的默认安装路径_避免C盘爆满的终极设置【技巧】  J*aScript map 迭代中检测空数组元素的有效方法  妖精漫画网页版登录入口免费_妖精漫画官网主页直接阅读漫画  夸克浏览器图书入口 夸克手机浏览器阅读入口  Composer的 archive 命令怎么用_快速打包你的PHP项目及其Composer依赖  解决Flask中Quill编辑器内容提交失败及TypeError的指南  腾讯视频怎么使用多账号家庭管理_腾讯视频家庭多账号统一管理与权限分配教程  支付宝如何设置安全保护_支付宝安全设置的全面教程  UC浏览器官网入口2025最新 UC浏览器网页版正式地址  谷歌学术网站直达地址 谷歌学术搜索网页版一键进入  Mudbox图层蒙版怎么用_Mudbox图层蒙版数字雕刻应用技巧  KFC套餐升级怎么获取优惠代码_KFC套餐升级活动与优惠代码获取方法  在J*aScript中复现SciPy的B样条拟合与求值：关键考量  提升Kafka消费者健壮性：会话超时处理与消息处理语义  React项目中导航栏Logo自适应布局：避免裁剪与布局溢出  在J*a中如何开发在线活动报名与管理系统_活动报名管理项目实战解析  TikTok国际版官网直达_TikTok国际版官网直达进入在线观看  Python getattr() 异常处理深度解析：避免程序意外退出  mc.js免安装版 mc.js一键畅玩入口  如何使用CaptainHook和Composer管理Git钩子_在提交前自动运行代码检查的Composer配置  微信网页版扫码登录入口 微信网页版二维码登录入口  一加手机拍照效果不好怎么办 一加哈苏影像调校与专业模式使用教程【高手篇】  C++的std::inclusive_scan和std::exclusive_scan是什么_C++17并行算法中的前缀和计算  AO3最新官网入口公告_2025AO3镜像站实时查询方法  Windows10怎么开启夜间模式 Windows10系统设置调整色温与亮度缓解夜间用眼疲劳【教程】  Go语言HTML解析：利用Goquery精准获取指定元素内容  痛风发作了怎么办？ 快速止痛和后期饮食调理  CSS Box Model与弹性按钮：维持布局稳定的动画实践  Golang如何使用net/url解析URL_Golang URL解析与处理方法  c++20的std::jthread是什么_c++可中断线程与RAII式管理  J*aScript中如何高效提取对象指定属性  Golang如何实现Web接口签名验证_Golang Web接口签名校验开发方法  提升屏幕阅读器对“m”时间单位的播报准确性：HTML与CSS组合解决方案  PySpark中从现有列右侧提取可变长度字符创建新列的教程  动漫花园资源网使用步骤_动漫花园资源网下载流程  豆包手机助手发布技术预览版：直接嵌入手机系统！努比亚样机发售  京东京造J1和网易云音乐氧气真无线有什么不同_国产电商蓝牙耳机音质对比  Win11怎么安装Linux子系统 Win11 WSL2安装Ubuntu及环境配置指南  从OpenAI API响应中高效提取生成文本  KFC早餐时段怎么领特惠代码_KFC早餐订餐优惠代码获取与使用说明  苹果手机如何防止被恶意App追踪