当前位置： 首页 > news >正文

【react组件】矩形框选小组件，鼠标左键选中 div，键盘 ESC 清空

news 来源：原创 2025/8/4 17:31:17

在线预览
GitHub
在这里插入图片描述

demo

import React, { useState } from 'react';
import Chooser from 'rc-chooser';const containerStyle: React.CSSProperties = {display: 'flex',alignItems: 'center',justifyContent: 'center',flexWrap: 'wrap',
};const boxStyle: React.CSSProperties = {width: 40,height: 40,border: '1px solid red',margin: 2,
};const Child = React.memo(({ selected }: { selected: string[] }) => {return (<div className="child" style={containerStyle}>{Array.from({ length: 100 }).map((_, index) => {const isSelected = selected.includes(`${index}`);return (<divkey={index}style={{...boxStyle,backgroundColor: isSelected ? 'blue' : 'white',}}data-id={index}>Div {index + 1}</div>);})}</div>);
});export default () => {const [selected, setSelected] = useState<string[]>([]);const observeHandle = (data: string[]) => {setSelected(data);};return (<div style={{ margin: 20 }}><Chooser observeProp="data-id" observeHandle={observeHandle}><Child selected={selected} /></Chooser></div>);
};

相关文章：

【react组件】矩形框选小组件，鼠标左键选中 div，键盘 ESC 清空

在线预览 GitHub demo import React, { useState } from react; import Chooser from rc-chooser;const containerStyle: React.CSSProperties {display: flex,alignItems: center,justifyContent: center,flexWrap: wrap, };const boxStyle: React.CSSProperties {width:…...

编程日记 2025/8/4 17:31:17

数据结构5.0

大家好&#xff0c;今天是队列的知识哦~ 目录 一、概念 1.0单链表 2.0双链表 3.0数组 二、队列的方法 1.0 offer方法 2.0 poll方法 3.0 peek方法 4.0 isEmpty方法 三、队列的题目 1.0 用队列实现栈 2.0 用栈实现队列 3.0 设计循环队列 一、概念 数组 、单链表和双…...

编程日记 2025/8/4 6:30:09

Python字典：数据操作的核心容器

在Python编程生态中&#xff0c;字典&#xff08;dict&#xff09;是最常用且功能强大的内置数据结构之一。它以键值对&#xff08;Key-Value Pair&#xff09;的形式存储数据&#xff0c;为快速查找、灵活映射关系提供了天然支持。无论是数据清洗、算法实现还是Web开发&#x…...

编程日记 2025/8/4 17:26:10

Midjourney-V7：支持参考图片头像或背景生成新保真图

Midjourney-V7重磅升级Omni Reference&#xff1a;全能图像参考神器&#xff01;再也不用担心生成图片货不对版了&#xff01; 就在上周&#xff0c;Midjourney发版它最新的V7版本&#xff1a;Omini Reference&#xff0c;提供了全方位图像参考功能&#xff0c;它可以参考你提…...

编程日记 2025/8/4 17:21:10

【MySQL数据库】--SQLyog创建数据库+python连接

目录 1.连接本地数据库 2.创建数据库和表 3.使用 python读取数据 1.连接本地数据库 进入SQLyog 2.创建数据库和表 创建数据库gyp_test&#xff1a; CREATE DATABASE gyp_test CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; 创建表student_grade: CREATE TABLE …...

编程日记 2025/8/4 17:23:05

深入解析：思维链模型在大语言模型中的应用与实践

在人工智能领域&#xff0c;大语言模型的发展正以前所未有的速度改变着我们的生活和工作方式。从早期的文本生成到如今的复杂推理&#xff0c;模型的能力不断进化。而其中&#xff0c;思维链&#xff08;Chain-of-Thought, CoT&#xff09;技术的出现&#xff0c;更是为大模型的…...

编程日记 2025/8/4 17:23:39

服务器多客户端连接核心要点（1）

刷题 服务器多客户端连接核心要点 多进程服务器 实现原理 fork子进程&#xff1a;每次accept新客户端后&#xff0c;调用fork创建子进程。独立处理&#xff1a;子进程负责与客户端通信&#xff08;如read/write&#xff09;&#xff0c;父进程继续监听新连接。 特点 隔离性…...

编程日记 2025/8/3 18:46:36

SIGIR 2025端到端生成式推荐ETEGRec

文章目录 1. 背景2. 方法2.1 框架图2.2 问题定义2.3 Item Tokenizer2.4 Generative Recommender2.5 ⭐️Sequence-Item Alignment2.6 ⭐️Preference-Semantic Alignment2.7 交替优化 3. 总结 现阶段 GRM 大多是两阶段的模型&#xff0c;第一阶段进行内容理解-行为语义对齐&…...

编程日记 2025/8/3 18:55:14

rust 中的 EBNF 介绍

在 rust 参考手册中&#xff0c;有大量类似&#xff1a; 句法 MacroInvocation :SimplePath ! DelimTokenTreeDelimTokenTree :( TokenTree* )| [ TokenTree* ]| { TokenTree* }TokenTree :Token排除 定界符(delimiters) | DelimTokenTreeMacroInvocationSemi :SimplePath ! (…...

编程日记 2025/8/4 17:23:38

解决 Redis 缓存与数据库一致性问题的技术指南

Redis 缓存与数据库一致性是分布式系统中常见的挑战&#xff0c;尤其在高并发场景下&#xff08;如电商、用户管理、对账系统&#xff09;。Redis 作为高性能缓存&#xff0c;常用于加速数据访问&#xff0c;但其与数据库&#xff08;如 MySQL&#xff09;之间的数据同步可能因…...

编程日记 2025/8/4 17:29:56

LlamaIndex 第六篇 SimpleDirectoryReader

SimpleDirectoryReader 是将本地文件数据加载到 LlamaIndex 的最简单方式。虽然在实际生产场景中&#xff0c;您更可能需要使用 LlamaHub 提供的多种数据读取器&#xff08;Reader&#xff09;&#xff0c;但 SimpleDirectoryReader 无疑是快速入门的理想选择。 支持的文件类型…...

编程日记 2025/8/4 17:24:23

window 显示驱动开发-配置内存段类型

视频内存管理器&#xff08;VidMm&#xff09;和显示硬件仅支持某些类型的内存段。 因此&#xff0c;内核模式显示微型端口驱动程序&#xff08;KMD&#xff09;只能配置这些类型的段。 KMD 可以配置内存空间段和光圈空间段&#xff0c;其中不同&#xff1a; 内存空间段由保存…...

编程日记 2025/8/4 14:01:31

【人工智能学习之动作识别TSM训练与部署】

【人工智能学习之动作识别TSM训练与部署】 基于MMAction2动作识别项目的开发一、MMAction2的安装二、数据集制作三、模型训练1. 配置文件准备2. 关键参数修改3. 启动训练4. 启动成功 ONNX模型部署方案一、环境准备二、执行转换命令 基于MMAction2动作识别项目的开发 一、MMAct…...

编程日记 2025/8/4 6:09:54

PostgreSQL冻结过程

1.冻结过程 冻结过程有两种模式&#xff0c;依特定条件而择其一执行。为方便起见&#xff0c;将这两种模式分别称为惰性模式&#xff08;lazy mode&#xff09;和迫切模式&#xff08;eager mode&#xff09;。 并发清理&#xff08;Concurrent VACUUM&#xff09;通常在内部…...

编程日记 2025/8/4 17:21:54

SSHv2公钥认证示例-Paramiko复用 Transport 连接

在 Paramiko 中复用 Transport 连接时&#xff0c;若要通过 公钥认证&#xff08;而非密码&#xff09;建立连接&#xff0c;需手动加载私钥并与 Transport 关联。以下是详细操作步骤及完整代码示例&#xff1a; 步骤 1&#xff1a;加载私钥文件 使用 RSAKey 或 Ed25519Key 类…...

编程日记 2025/8/4 1:41:40

华为5.7机考-最小代价相遇的路径规划Java题解

题目内容 输入描述 输出描述 示例&#xff1a; 输入&#xff1a; 2 1 2 2 1 输出&#xff1a; 3 思路&#xff1a; Dijkstra 算法实现 dijkstra(int sx, int sy, int[][] dirs) 方法&#xff1a; 参数&#xff1a;起点坐标 (sx, sy) 和允许的移动方向 初始化&#xff1…...

编程日记 2025/8/4 17:21:10

element-ui分页的使用及修改样式

1.安装 npm install element-ui -S 2.在main.js中引入,这里是全部引入&#xff0c;也可以按需引入 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) 3.使用 layout"prev, pager, next, jumper" &#xff1a;jumpe…...

编程日记 2025/8/4 17:24:23

[Unity]-[UI]-[Image] 关于UI精灵图资源导入设置的详细解释

Unity UI Sprite UI资源导入详解图片导入项目Texture TypeTexture ShapeAdvanced Setting 高级设置 图片设置案例常见细节问题 知识点详解来源 UI资源导入详解 Unity中的UI资源有图片、矢量图、字体、预制体、图集、动画等等资源。 这其中图片是最重要以及最基础的资源组成&a…...

编程日记 2025/8/3 18:51:49

MLX-Audio：高效音频合成的新时代利器

MLX-Audio&#xff1a;高效音频合成的新时代利器 现代社会的快节奏生活中&#xff0c;对语音技术的需求越来越高。无论是个性化语音助手&#xff0c;还是内容创作者所需的高效音频生成工具&#xff0c;语音技术都发挥着不可或缺的作用。今天&#xff0c;我们将介绍一个创新的开…...

编程日记 2025/8/3 19:34:19

操作系统导论——第27章 插叙：线程API

关键问题&#xff1a;如何创建和控制线程&#xff1f; 操作系统应该提供哪些创建和控制线程的接口&#xff1f;这些接口如何设计得易用和实用&#xff1f; 一、线程创建 编写多线程程序的第一步就是创建新线程&#xff0c;因此必须存在某种线程创建接口。在 POSIX 中&#xff1…...

编程日记 2025/8/4 17:27:33

代采系统：定义、优势与未来趋势

一、代采系统的定义 代采系统是一种基于互联网的集中采购平台&#xff0c;它通过整合供应链资源&#xff0c;为中小企业或个人提供采购代理服务。商家可以在没有自己库存的情况下销售产品&#xff0c;当客户下单时&#xff0c;订单信息会自动或手动发送给供应商&#xff0c;由…...

编程日记 2025/8/3 19:25:40

后缀表达式+栈（详解）（c++）

前言 很抱歉&#xff0c;上一期没有介绍栈stack的用法&#xff0c;今天简要介绍一下&#xff0c;再讲讲后缀表达式&#xff0c;用stack栈做一些后缀表达式的练习。 栈 栈stack是c中系统给出的栈&#xff0c;有了它&#xff0c;就不用自己创建栈啦&#xff01; 头文件 栈sta…...

编程日记 2025/8/4 17:24:25

Kaggle图像分类竞赛实战总结详细代码解读

前言 我是跟着李沐的动手学深度学习v2视频学习深度学习的&#xff0c;光看不做假把式&#xff0c;所以在学习完第七章-现代卷积神经网络之后&#xff0c;参加了一次李沐发布的Kaggle竞赛。自己动手&#xff0c;从组织数据集开始&#xff0c;到训练&#xff0c;再到推理&#x…...

编程日记 2025/8/4 17:29:57

开源AI对比--dify、n8n

原文网址&#xff1a;开源AI对比--dify、n8n-CSDN博客 简介 本文介绍开源AI工作流工具的选型。 对比 项difyn8n占优者学习难度简单中等dify核心理念用LLM构建应用。“连接一切”。以工作流自动化连接各系统。平手工作模式 Chatflow&#xff1a;对话。支持用户意图识别、上下…...

编程日记 2025/8/4 7:22:10

【SQL系列】多表关联更新

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2025/8/4 17:23:39

软件设计师教程——第一章 计算机系统知识（下）

前言 在竞争激烈的就业市场中&#xff0c;证书是大学生求职的重要加分项。中级软件设计师证书专业性强、认可度高&#xff0c;是计算机相关专业学生考证的热门选择&#xff0c;既能检验专业知识&#xff0c;又有助于职业发展。本教程将聚焦核心重点&#xff0c;以点带面构建知…...

编程日记 2025/8/4 17:23:06

华为银河麒麟 V10（ARM）系统软件部署全攻略：Redis、RabbitMQ、MySQL 等集群搭建指南

一、Redis 集群部署&#xff08;主从 哨兵模式&#xff09; 1. 环境准备 系统&#xff1a;华为银河麒麟 V10&#xff08;ARM64&#xff09;节点&#xff1a;3 台服务器&#xff08;1 主 2 从 3 哨兵&#xff09; 2. 安装包下载 bash # 华为镜像站 wget https://update.c…...

编程日记 2025/7/31 1:31:11

World of Warcraft [CLASSIC][80][Deluyia] [Fragment of Val‘anyr]

瓦兰奈尔的碎片 [Fragment of Valanyr] 有时候下个班打个游戏&#xff0c;没想到套路也这么多&#xff0c;唉&#xff0c;何况现实生活&#xff0c;这一个片版本末期才1000G&#xff0c;30个&#xff0c;也就30000G&#xff0c;时光徽章等同月卡15000G&#xff0c;折合一下也就…...

编程日记 2025/7/31 1:31:10

C++:求分数序列和

【描述】 有一个分数序列 2/1,3/2,5/3,8/5,13/8,21/13,.... 求这个分数序列的前n项之和。 输入 输入有一行&#xff1a;正整数n。 输出 输出有一行&#xff1a;分数序列的和&#xff08;浮点数&#xff0c;精确到小数点后4位&#xff09;。 【样例输入】 99 【样例输出】 160.4…...

编程日记 2025/8/4 14:46:09

支付宝沙盒模式商家转账经常出现 响应异常: 解包错误

2025年5月9日16:27:08 php8.3 laravel11 octane swoole加速 测试时不时就出现 响应异常: 解包错误 错误信息&#xff1a; Yansongda\Artful\Exception\InvalidResponseException: 响应异常: 解包错误 in /opt/www/vendor/yansongda/artful/src/Direction/CollectionDirect…...

编程日记 2025/8/4 1:41:30

第04章—技术突击篇：如何根据求职意向进行快速提升与复盘

经过上一讲的内容阐述后&#xff0c;咱们定好了一个与自身最匹配的期望薪资&#xff0c;接着又该如何准备呢&#xff1f; 很多人在准备时&#xff0c;通常会选择背面试八股文&#xff0c;这种做法效率的确很高&#xff0c;毕竟能在“八股文”上出现的题&#xff0c;也绝对是面…...

编程日记 2025/7/31 1:31:03

数据统计的意义：钱包余额变动

钱包余额变动统计的核心意义在于通过数据可视化实现资金流动的透明化管理&#xff0c;其价值主要体现在以下五个维度&#xff1a; 一、财务健康诊断&#xff08;&#xff09; 资金流动可视化 通过期初/期末余额对比&#xff0c;可快速识别异常波动&#xff08;如连续3个月余额…...

编程日记 2025/8/3 21:27:44

单调栈模版型题目（3）

单调栈型题目贡献法 基本模版 这是数组a中的 首先我们要明白什么叫做贡献&#xff0c;在一个数组b{1,3,5}中&#xff0c;连续包含1的连续子数组为{1}&#xff0c;{1,3}&#xff0c;{1,3,5}&#xff0c;一共有三个&#xff0c;这三个数一共能组成6个连续子数组&#xff0c;而其…...

编程日记 2025/8/3 8:34:53

PostgreSQL 的 pg_advisory_lock 函数

PostgreSQL 的 pg_advisory_lock 函数 pg_advisory_lock 是 PostgreSQL 提供的一种应用级锁机制&#xff0c;它不锁定具体的数据库对象&#xff08;如表或行&#xff09;&#xff0c;而是通过数字键值来协调应用间的并发控制。 锁的基本概念 PostgreSQL 提供两种咨询锁(advi…...

编程日记 2025/8/1 4:56:27

NLP基础

1. 基本概念 自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&#xff09;是人工智能和语言学领域的一个分支&#xff0c;它涉及到计算机和人类&#xff08;自然&#xff09;语言之间的相互作用。它的主要目标是让计算机能够理解、解释和生成人类语言…...

编程日记 2025/8/4 6:30:16

[AI Tools] Dify 工具插件上传指南：如何将插件发布到官方市场

Dify 作为开源的 LLM 应用开发平台，不仅支持本地化插件开发，也提供了插件市场机制，让开发者能够将自己构建的插件发布并供他人使用。本文将详细介绍如何将你开发的 Dify Tools 插件上传至官方插件市场，包括 README 编写、插件打包、仓库 PR 等核心步骤。 一、准备 README 文…...

编程日记 2025/7/31 1:30:53

Qt读写XML文档

XML 结构与概念简介 XML&#xff08;可扩展标记语言&#xff09; 是一种用于存储和传输结构化数据的标记语言。其核心特性包括&#xff1a; 1、树状结构&#xff1a;XML 数据以层次化的树形结构组织&#xff0c;包含一个根元素&#xff08;Root Element&#xff09;&#xff…...

编程日记 2025/7/31 1:30:51

htmlUnit和Selenium的区别以及使用BrowserMobProxy捕获网络请求

1. Selenium&#xff1a;浏览器自动化之王 核心定位&#xff1a; 跨平台、跨语言的浏览器操控框架&#xff0c;通过驱动真实浏览器实现像素级用户行为模拟。 技术架构&#xff1a; 核心特性&#xff1a; 支持所有主流浏览器&#xff08;含移动端模拟&#xff09; 精…...

编程日记 2025/8/4 6:19:53

C#黑魔法：鸭子类型(Duck Typing)

C#黑魔法&#xff1a;鸭子类型(Duck Typing) 如果它走起路来像鸭子&#xff0c;叫起来像鸭子&#xff0c;那么它就是鸭子。 鸭子类型&#xff0c;主要应用于动态语言类型&#xff0c;比如JS、Python等&#xff0c;核心理念为&#xff1a;关注对象的行为&#xff08;方法或属性…...

编程日记 2025/7/31 1:30:49

2025 年数维杯数学建模B题完整论文代码模型

《2025 年数维杯数学建模B题完整论文代码模型》 B题完整论文 一、赛事背景与题目总览 2025 年第十届数维杯大学生数学建模挑战赛的 B 题聚焦于“马拉松经济的高质量发展思路探索”。近年来&#xff0c;我国马拉松赛事如同一颗颗璀璨的星星&#xff0c;在城市的天空中闪耀&am…...

编程日记 2025/7/31 1:30:46

C++23 中的 views::chunk：深入探索与应用

文章目录 一、views::chunk 的背景与动机二、views::chunk 的基本用法语法与参数示例代码 三、views::chunk 的高级用法处理不完整块与 views::drop 和 views::take 结合 四、性能分析五、应用场景1. 批量处理数据2. 分页显示3. 并行处理 六、与其他范围适配器的组合1. 与 view…...

编程日记 2025/7/31 1:30:42

库室指静脉人脸门禁机 LK-BM-S10C/JR

1、采用大于等于四核处理器&#xff0c;主频大于1G&#xff1b; 2、内存≥4G DDR3&#xff1b;存储≥8G 3、核心模块采用国产工业级处理芯片和嵌入式Android实时多任务系统&#xff0c;采用模块化设计,模块间通过标准接口相连&#xff1b; 4、大于等于10英寸电容屏&#xf…...

编程日记 2025/8/4 1:25:44

低成本自动化改造的18个技术锚点深度解析

执行摘要 本文旨在深入剖析四项关键的低成本自动化技术&#xff0c;这些技术为工业转型提供了显著的运营和经济效益。文章将提供实用且深入的指导&#xff0c;涵盖老旧设备联网、AGV车队优化、空压机系统智能能耗管控以及此类项目投资回报率&#xff08;ROI&#xff09;的严谨…...

编程日记 2025/7/31 1:30:33

线程中常用的方法

知识点详细说明 Java线程的核心方法集中在Thread类和Object类中，以下是新增整合后的常用方法分类解析： 1. 线程生命周期控制 方法作用注意事项start()启动新线程，JVM调用run()方法多次调用会抛出IllegalThreadStateException（线程状态不可逆）。run()线程的任务逻辑直接调…...

编程日记 2025/8/4 4:35:21

运维体系架构规划

运维体系架构规划是一个系统性工程&#xff0c;旨在构建高效、稳定、安全的运维体系&#xff0c;保障业务系统的持续运行。下面从规划目标、核心模块、实施步骤等方面进行详细阐述&#xff1a; 一、规划目标 高可用性&#xff1a;确保业务系统 724 小时不间断运行&#xff0c…...

编程日记 2025/8/1 7:38:07

C++结构体介绍

结构体的定义 在C中&#xff0c;结构体&#xff08;struct&#xff09;是一种用户定义的数据类型&#xff0c;允许将不同类型的数据组合在一起。结构体的定义使用struct关键字&#xff0c;后跟结构体名称和一对花括号{}&#xff0c;花括号内包含成员变量的声明。 struct Pers…...

编程日记 2025/7/31 1:30:27

RoPE长度外推:外插内插

RoPE:假定 α \alpha α是定值 其中一半位置是用cos表示的 cos ⁡ ( k α − 2 i d ) \cos(k\alpha^{-\frac{2i}{d}}) cos(kα−d2i​)(另一半是sin)(d是词嵌入维度) 当太长如何解决: 1 直接不管—外插 缺点:超过一定长度性能急剧下降。(较大时&#xff0c;对应的很多位置编码…...

编程日记 2025/7/30 12:12:24

牛客练习赛138-题解

牛客练习赛138-题解 https://ac.nowcoder.com/acm/contest/109081#question A-小s的签到题 题目描述 给定一个比赛榜单&#xff1a; 第一行是 n 个不同的大写字母&#xff0c;代表题号第二行是 n 个形如a/b的字符串&#xff0c;表示每道题的通过人数和提交人数 找到通过人…...

编程日记 2025/7/31 3:50:56

MySQL高可用方案全攻略：选型指南与AI运维实践

MySQL高可用方案全攻略：选型指南与AI运维实践 引言：当数据库成为业务生命线 在数字化时代，数据库就是企业的"心脏"。一次数据库宕机可能导致： 电商网站每秒损失上万元订单游戏公司遭遇玩家大规模流失金融系统引发连锁反应本文将为你揭秘： MySQL主流高可用方案…...

编程日记 2025/7/31 0:24:21

【库（Library）、包（Package）和模块（Module）解析】

在Python中&#xff0c;**库&#xff08;Library&#xff09;、包&#xff08;Package&#xff09;和模块&#xff08;Module&#xff09;**是代码组织的不同层级&#xff0c;而import语句的导入行为与它们密切相关。以下是详细对比和解释&#xff1a; &#x1f4e6; 1. 核心概…...

编程日记 2025/8/3 18:03:04