react antd点击table行时加选中背景色

news/2024/9/20 1:21:55/ 标签: react.js, javascript, 前端

在React中使用Ant Design的Table组件时,可以通过rowSelection属性来实现点击行时加亮背景色的功能。 

javascript">import React from 'react';
import { Table } from 'antd';const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',},// ... 更多数据
];class App extends React.Component {state = {selectedRowKeys: [], // 选中的行的keys};onRowClick = (record, rowKey) => {// 更新选中的行的keysthis.setState({ selectedRowKeys: [rowKey] });};render() {const { selectedRowKeys } = this.state;return (<TabledataSource={data}rowSelection={{selectedRowKeys,onChange: this.onRowClick,}}rowClassName={(record, index) =>selectedRowKeys.includes(index.toString()) ? 'ant-table-row-selected' : ''}columns={[{title: 'Name',dataIndex: 'name',},{title: 'Age',dataIndex: 'age',},{title: 'Address',dataIndex: 'address',},]}/>);}
}export default App;

state变量selectedRowKeys来记录选中的行的key。onRowClick方法会在行点击时被调用,并更新selectedRowKeys。rowSelection属性用于配置行选择功能,而rowClassName属性用于根据行的key给行添加特定的className,从而实现加亮背景色的效果。

点击表格的一行时,该行的背景色会变为蓝色(Ant Design默认主题的选中颜色),同时selectedRowKeys会被更新为当前点击的行的key。


http://www.ppmy.cn/news/1519758.html

相关文章

Leetcode102二叉树的层序遍历(java实现)

今天分享的题目是lee102题&#xff0c;题目的描述如下&#xff1a; 可能做到这道题的小伙伴写过其他关于二叉树的题目&#xff0c;但是一般是使用递归的方式做一个深度遍历&#xff0c;而层序遍历我们该如何做呢&#xff1f; 解题思路&#xff1a;使用一个队列来记录本层节点&a…

docker——compose容器编排!!!

⼀、Docker-compose 定义 1. docker compose 是 docker 官⽅的开源项⽬&#xff0c;负责实现对docker 容器集群的快速编排(容器&#xff0c;依赖&#xff0c;⽹络&#xff0c;挂载。。) 2. compose 是 docker 公司推出的⼀个⼯具软件&#xff0c;可以管理多个docker 容器组成…

手撕Python之序列类型

1.列表---list 索引的使用 当我们有一个数据的时候&#xff0c;我们怎么将这个数据存储到程序呢&#xff1f; 我们定义一个变量&#xff0c;将数据存储在变量中 那么如果有100个数据呢&#xff1f;要定义100个变量吗&#xff1f; 我们是可以用列表这个东西进行多个数据的存…

92. UE5 GAS RPG 使用C++创建GE实现灼烧的负面效果

在正常游戏里&#xff0c;有些伤害技能会携带一些负面效果&#xff0c;比如火焰伤害的技能会携带燃烧效果&#xff0c;敌人在受到伤害后&#xff0c;会接受一个燃烧的效果&#xff0c;燃烧效果会在敌人身上持续一段时间&#xff0c;并且持续受到火焰灼烧。 我们将在这一篇文章里…

[知识分享]华为铁三角工作法

在通信技术领域&#xff0c;尤其是无线通信和物联网领域&#xff0c;“华为铁三角”是华为公司内部的一种销售、交付和服务一体化的运作模式。这种模式强调的是以客户为中心&#xff0c;通过市场、销售、交付和服务三个关键环节的紧密协作&#xff0c;快速响应客户需求&#xf…

upload-labs通关攻略

Pass-1 这里上传php文件说不允许上传 然后咱们开启抓包将png文件改为php文件 放包回去成功上传 Pass-2 进来查看提示说对mime进行检查 抓包把这里改为image/jpg; 放包回去就上传成功了 Pass-3 这里上传php文件它说不允许上传这些后缀的文件 那咱们就可以改它的后缀名来绕过…

HarmonyOS开发实战( Beta5版)AOT编译使用指南

AOT编译使用指南 AOT(Ahead Of Time)即预先编译&#xff0c;在程序运行前&#xff0c;预先编译成高性能机器码&#xff0c;让程序在首次运行就能通过执行高性能机器码获得性能收益 方舟AOT编译器实现了PGO (Profile-Guided-Optimization&#xff09;编译优化&#xff0c;即通过…

Spring Boot 中 `@Transactional` 注解使用示例

Transactional 注解在 Spring Boot 中用于管理事务。它确保在方法执行过程中&#xff0c;所有数据库操作要么全部成功&#xff0c;要么全部回滚&#xff0c;以维护数据的一致性。下面是一些使用 Transactional 的示例&#xff1a; 1. 在服务层使用 Transactional Service pub…

【React】Redux-toolkit 处理异步操作

安装 npm install reduxjs/toolkit react-redux创建 store src\store\index.js import { configureStore } from reduxjs/toolkit; import homeReducer from ./modules/home;const store configureStore({reducer: {home: homeReducer,}, });export default store;创建 Red…

UE4 BuildCookRun中的Archive的含义

在UE4中&#xff0c;Archive、Cook、Stage、Package、Build的次序是怎么样的&#xff1f; 整体打包过程如下: Build -> Cook-> Stage -> Package -> Archive。其中&#xff0c;Archive 的含义是从Staged目录中拷贝文件到一个额外的目录即Archive目录。被称为“归档…

四十五、【人工智能】【机器学习】- Robust Regression(稳健回归)

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…

【Android】repositories和sourceSets指定了 `libs` 目录的区别

repositories { flatDir { dirs libs } } 这段代码的作用是告诉 Gradle 在指定的目录&#xff08;这里是 libs 目录&#xff09;中查找 JAR 文件或 AAR 文件。flatDir 是一种简单的文件目录结构&#xff0c;它不会解析子目录&#xff0c;只会查找指定目录中的文件。 reposito…

Arduino 串口打印小知识点

String str[]{"abc","defg","hijk","lm","n"}; int num; void setup() {Serial.begin(115200);numsizeof(str) /sizeof(str[2]);Serial.print("该数组 str[]的长度&#xff1a;");Serial.print(num); }void loop(…

Python编码系列—Python中的HTTPS与加密技术:构建安全的网络通信

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

p2p、分布式,区块链笔记:基于IPFS实现的数据库orbitdb笔记

orbitdb orbitdb &#xff1a;Peer-to-Peer Databases for the Decentralized Web 特性说明特点无服务器、分布式、p2p编程语言JavaScript对其他语言的支持A python client for the Orbitdb HTTP API&#xff0c;go-orbit-db&#xff0c; 让我们了解一下谁在使用 js-ipfs&…

jmeter 响应乱码

Jmeter在做接口测试的时候的&#xff0c;如果接口响应的内容中有中文&#xff0c;jmeter的响应内容很可能显示乱码&#xff0c;为了规避这种出现乱码的问题&#xff0c;就要对jmeter的响应结果进行编码处理。 打开jmeter进行接口、压力、性能等测试&#xff0c;出现以下乱码问…

4. MyBatis如何与Spring集成?有哪些常见的配置方式?

MyBatis 可以通过多种方式与 Spring 集成&#xff0c;通常通过配置 Spring 来管理 MyBatis 的 SqlSessionFactory 和 Mapper&#xff0c;并使用 Spring 的事务管理功能来管理数据库事务。以下是 MyBatis 与 Spring 集成的常见配置方式&#xff1a; 1. 基于 XML 配置的集成 这是…

交叉编译 gmp

文章目录 交叉编译 gmp1 概述2 源码下载2.1 官网下载2.2 使用 apt source 下载 3 交叉编译4 关于 DESTDIR 的说明 交叉编译 gmp 1 概述 GMP (GNU Multiple Precision Arithmetic Library) 是一个用于任意精度计算设计的数学库&#xff0c;它的主要目标应用是密码学应用和研究…

PHP:构建高效动态网页的基石

PHP:构建高效动态网页的基石 在当今的互联网世界中,PHP作为一种服务器端脚本语言,依然占据着不可替代的地位。自1995年诞生以来,PHP凭借其简洁的语法、丰富的功能和广泛的数据库支持,成为了开发动态网页和Web应用的首选语言之一。本文将深入探讨PHP的核心优势、最新发展动…

内存管理篇-20 Linux虚拟内存管理

1.虚拟地址的经典布局 这里的内容比较少。只要就是内核用户空间的划分。内核空间又有自己的划分。也需要注意一下每个区域的性能。理论上线性映射是最简单的&#xff0c;所以性能最高。同时&#xff0c;注意内核空间是可以配置的&#xff0c;并不是都3:1。 2.ARM32下的内存…