首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从所有按钮中删除活动的类,并将其添加到react中单击的最后一个按钮

在React中,要从所有按钮中删除活动的类,并将其添加到最后一个被点击的按钮,可以按照以下步骤进行操作:

  1. 首先,创建一个React组件,可以命名为ButtonList,用于渲染按钮列表和处理点击事件。
  2. ButtonList组件的构造函数中,初始化一个状态变量,用于存储最后一个被点击的按钮的索引。可以使用state对象来实现这个状态变量。
  3. ButtonList组件的render方法中,使用map函数遍历按钮数据,并渲染每个按钮。为每个按钮添加一个点击事件处理函数,该函数将更新状态变量为当前按钮的索引。
  4. 在点击事件处理函数中,首先从所有按钮中移除活动类。可以通过DOM操作或者使用React的ref来获取按钮元素,并使用classList对象的remove方法来移除活动类。
  5. 然后,将活动类添加到最后一个被点击的按钮。可以通过索引值来获取最后一个按钮的元素,并使用classList对象的add方法来添加活动类。

以下是示例代码:

代码语言:txt
复制
import React, { Component } from 'react';

class ButtonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lastClickedIndex: null
    };
  }

  handleClick(index) {
    const buttons = document.querySelectorAll('.button'); // 获取所有按钮元素
    buttons.forEach(button => {
      button.classList.remove('active'); // 移除活动类
    });

    const lastClickedButton = buttons[index]; // 获取最后一个被点击的按钮元素
    lastClickedButton.classList.add('active'); // 添加活动类

    this.setState({ lastClickedIndex: index }); // 更新状态变量
  }

  render() {
    const buttonData = ['Button 1', 'Button 2', 'Button 3']; // 按钮数据

    return (
      <div>
        {buttonData.map((button, index) => (
          <button
            key={index}
            className="button"
            onClick={() => this.handleClick(index)}
          >
            {button}
          </button>
        ))}
      </div>
    );
  }
}

export default ButtonList;

在上述代码中,ButtonList组件会渲染一个按钮列表,并为每个按钮添加了点击事件处理函数handleClick。在点击事件处理函数中,会先移除所有按钮的活动类,然后将活动类添加到最后一个被点击的按钮。同时,状态变量lastClickedIndex会被更新为当前按钮的索引。

请注意,上述代码中没有提及任何特定的云计算品牌商,如果需要使用腾讯云相关产品来支持按钮列表的存储、部署等功能,可以根据具体需求选择适合的腾讯云产品,并在代码中进行相应的集成和调用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Sweet Alert弹窗插件安装及使用详解笔记

如果要显示自定义取消按钮,可以设置 buttons 为一个字符串数组,其中第一个值是“取消”按钮文本,第二个值是“确认”按钮文本: swal("你确定要这么做吗?"...通过为其指定对象 buttons ,可以根据需求设置完全相同按钮指定它们在单击时解析值!...注意,我们使用 content: "input" ,以便在用户单击“确认”按钮时显示输入字段检索它值: swal({   text: '搜索一个电影,例如:"La La Land"。'...swal.setActionValue({ confirm: 'Text from input' }) stopLoading 删除模态按钮所有加载状态。...它有一个额外,根据按钮类型改变 swal-button--{type} 。例如,确认按钮额外是 swal-button--confirm 。

9K10

如何在 React 快速实现暗黑模式

此文件是在 React 应用程序制作过程创建。复制此文件信息并将其存储在剪贴板,现在可以将其 index.css 删除。 修改 theme.js文件,它将由两部分组成。...第二部分是 "style:" 和 "body" 样式,这些式样是index.css文件复制信息,如下所示。...接下来,创建一个按钮添加“切换颜色模式”功能作为 onClick 响应事件: {colorMode==='light'...'Dark' : 'Light'} 通过执行此操作,将创建一个切换按钮,该按钮根据当前主题显示“深色”或“浅色”,允许用户通过单击按钮在两种模式之间切换。...在应用程序实现切换开关后,用户应该能够通过单击按钮在深色和浅色模式之间切换。然后,网站外观应相应更改。

52730

基于 ChatGPT 和 React 搭建 JSON 转 TS Web 应用

for React一个十分简单包,用于将代码编辑器添加到 React 应用程序,而 React Copy to Clipboard 包允许我们通过单击按钮复制和粘贴内容 React 应用程序删除多余文件...它为删除按钮呈现一个 SVG 图标。...接下来,让我们添加一些额外功能,例如通过单击按钮复制所有 Typescript 代码以及通过单击按钮清除输入编辑器所有内容能力。...text props(包含要复制内容)和一个 onCopy 属性(一个在复制内容成功后运行函数)删除用户输入======如果要删除所有用户输入,需要将 value 作为 prop 传递到 <Delete...应用程序添加高效代码编辑器如何在 Node.js 与 ChatGPT 通信如何在 React 单击按钮时复制与删除内容本教程完成一个可以使用 ChatGPT API 构建应用程序示例。

28010

如何使用纯前端控件集 WijmoJS 可视化在线设计器

开始使用WijmoJS Designer 设计器可视化界面首次打开时,该设计图面默认自带一个带有实时样本数据纯前端FlexGrid表格控件,要删除它,请单击“编辑”工具栏上删除按钮。...最后最后一行为日历valueChanged事件添加了一个Demo处理程序。 要返回可视化设计器,请单击页面左侧“设计视图”按钮(“保存”按钮下方)。...设计图面删除所有控件,然后在“工具箱”展开图表组,单击名为FlexChart项目。 请注意,该图表显示代表“最活跃”证券实时样本数据。...通过将其标题属性设置为Most Active,为图表添加标题。 找到palette属性,单击编辑器Show Colors按钮,然后选择一个预定义值,例如dark。...在“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现链接。

5.8K20

开发一个在线 Web 代码编辑器,如何?今天来教你!

组件 props 解构了 title 和 onClick。在这里,title 是一个文本字符串,onClick 是一个单击按钮时调用函数。...最后,传入 {title} 作为按钮标签内容 现在我们已经创建了一个可重用按钮组件,让我们继续将我们组件引入 App.js。...className="tab-button-container"作为包含三个选项卡按钮 div 标记样式属性。...接下来,我们来讨论一下 ControlledEditorComponent 东西: onBeforeChange 每当你向编辑器写入或编辑器删除时,都会调用此方法。...当然,如果你想的话,你可以将大量这些插件添加到编辑器,以使其具有更丰富功能。本文中,我们就不尝试所有功能了。 至此,我们大致完成了一个在线编辑器应用。

11.8K30

【实战】快来和我一起开发一个在线 Web 代码编辑器

组件 props 解构了 title 和 onClick。 在这里,title 是一个文本字符串,onClick 是一个单击按钮时调用函数。...最后,传入 {title} 作为按钮标签内容 现在我们已经创建了一个可重用按钮组件,让我们继续将我们组件引入 App.js。...className="tab-button-container" 作为包含三个选项卡按钮 div 标记样式属性。...接下来,我们来讨论一下 ControlledEditorComponent 东西: onBeforeChange 每当你向编辑器写入或编辑器删除时,都会调用此方法。...当然,如果你想的话,你可以将大量这些插件添加到编辑器,以使其具有更丰富功能。本文中,我们就不尝试所有功能了。 至此,我们大致完成了一个在线编辑器应用。

57920

旁路WAF:使用Burp插件绕过一些WAF设备

但是,这取决于能否创建一个可用头并将其添加到活动扫描,中继器请求,入侵者请求插件等等。我发现Fishnet Security这篇文章真的让人思如泉涌。...配置应该如下所示: 该插件现在应该被加载显示如下: 现在您需要导航到“选项 - >会话”,然后单击“会话处理规则”配置部分“添加”按钮,如下所示: 给规则一个名称,然后点击“规则操作”部分“添加...“Content-Type”头可以在每个请求中保持不变,所有请求删除,或修改为每个请求许多其他选项之一。一些WAF只会根据已知内容类型对请求进行解码/评估,这个功能针对是弱点。 3....这可以用来绕过依赖于路径信息不好写规则 6.路径模糊功能将路径最后一个斜杠修改为随机值,或者默认情况下不执行任何操作。...最后一个斜杠可以修改为许多值一个,在许多情况下,这会导致仍然有效请求,但可能会绕过编写依赖路径信息WAF规则 7.参数混淆特征是语言特定

1.4K60

Sentry Web 前端监控 - 最佳实践(官方教程)

sentry.io/ 左侧导航菜单中选择 Projects 以显示所有项目的列表 单击 + Create Project 按钮 注意:如果您帐户没有项目 --- 您可能会被重定向到入门向导以创建您一个项目...项目下拉列表,找到新项目点击齿轮图标打开项目设置(Project Settings) 单击 Alerts 以打开警报配置页面 单击 New Alert Rule 在 “New Alert Rule...” 表单,选择 “Issue Alert” 类型输入以下值 每次在所有环境(All Environments)通过邮件(Mail)看到事件时,新警报规则都会通知选定团队成员 单击 Save...将产品添加到购物车按钮 单击左侧面板上 Checkout 按钮以生成错误 请注意: 应用程序显示出错消息 错误出现在浏览器控制台中 发送到您在 Sentry 上配置电子邮件地址警报,通知您应用中发生错误...刷新浏览器通过将产品添加到购物车单击 Checkout 来生成错误 检查您电子邮件以获取有关新错误警报。

4K20

如何使用MapTool构建交互式地牢RPG 【Gaming】

在“将资源添加到库”对话框,选择位于左下角“RPTools”选项卡。这列出了RPTools服务器上所有可用免费艺术包、标记和地图等。单击可下载导入。...在出现“新建标记”对话框,为标记命名并将其设置为NPC或PC,然后单击“确定”按钮。 一旦一个标记在地图上,试着移动它,看看它移动是如何被控制到你指定网格上。...在“活动属性”窗口中,选择“标记属性”选项卡,然后单击左侧列“基本”类别。在*@HP下,添加*@MaxHP单击Update按钮单击“确定”按钮关闭窗口。 现在右键单击标记选择“编辑”。...在编辑标记窗口中,选择Statetab 输入标记最大HP值(玩家字符表)。 若要创建新宏,请在“窗口”菜单显示“活动”面板。 在“活动”面板单击鼠标右键,然后选择“添加新宏”。...你活动现在有了新能力! 选择一个标记单击HPTracker按钮。输入要从标记扣除点数,单击“确定”,然后观察运行状况栏更改情况以反映标记新状态。

4.4K60

Cheat Engine 官方教程汉化

然后更改值冻结地址,双击地址列表值进行编辑,通过单击启用码/冻结框将其冻结。 现在应该启用下一个按钮单击它以转到下一步。如果下一个按钮尚未启用,请再次单击点击我按钮。...设置时,单击一个扫描按钮。 因此,只需像以前一样扫描以查找健康地址,然后将其添加到地址列表。 现在再次单击扫描按钮。然后将扫描仪设置为双精度值,输入当前弹药值。...最后不要忘记单击停止按钮。 替换按钮会将该行代码替换为NOP。作弊引擎将提示您输入它将添加到高级选项列表条目的名称。 输入名称,然后单击确定按钮。 现在,单击教程更改值按钮。...如果下一个按钮未启用,则从找到列表中选择另一个地址,查找更改其值绿色地址,并将其设置为与上一个地址一样,查看它是否指向正确值,如果是这样,请更改值冻结单击更改指针按钮。...然后单击所有 4 个值攻击按钮。调试器列表应具有所有 4 个地址。 因此,请继续将它们添加到地址列表。 然后,让我们打开剖析数据结构表单。

2.5K10

如何结合 Core Data 和 SwiftUI

设置核心数据需要两个步骤:创建所谓持久性容器(从容器存储中加载保存实际数据),然后将其注入 SwiftUI 环境,以便我们所有的视图都可以访问它。 Xcode 模板已经为我们完成了这两个步骤。...使用获取请求 Core Data 检索信息——我们描述了我们想要内容,应如何对其进行排序以及是否应使用任何过滤器,然后 Core Data 会发回所有匹配数据。...这是一个引发函数调用,因为理论上它可能会失败。实际上,我们所做一切都没有失败可能,因此我们可以使用try?来调用它——–我们不在乎捕获错误。 因此,请将最后一行添加到按钮操作: try?...self.moc.save() 最后,您现在应该可以运行该应用程序对其进行尝试——单击几次 “Add” 按钮以生成一些随机学生,您应该看到他们滑入我们列表某个位置。...这是该项目概述最后一部分,因此,请将您代码重设为初始状态,确保您我们数据模型删除了Student实体——我们不再需要它。

11.8K30

优化 React APP 10 种方法

在文本框输入2Click Me连续单击按钮,我们将看到ReactComponent将被重新渲染一次,并且永远不会被渲染。 它将上一个道具和状态对象字段与下一个道具和状态对象字段进行浅层比较。...10. shouldComponentUpdate() React应用程序由组件组成,根组件(通常是App.jsApp)到扩展分支。...它在状态对象具有数据。如果我们在输入文本框输入一个值并按下Click Me按钮,则将呈现输入值。...现在,如果我们输入2单击按钮,则将渲染组件,应该渲染该组件,因为先前状态是这样: state = { data: null } 下一个状态对象是这样: state = { data: 2 } 因为...如果再次单击按钮,我们将有另一个重新渲染,不是这样,因为前一个状态对象和下一个状态对象将具有相同data值,但是由于setState新状态对象创建,React将看到差异状态对象引用和触发器重新呈现

33.8K20

将模型添加到场景 - 在您环境显示3D内容

最后几节,我们能够检测到一个平面显示一个焦点方块,以帮助我们为模型指定一个位置。我们也熟悉了热门测试和世界变换。现在,我们拥有显示虚拟对象所需所有工具。...在本教程,我们将学习如何检索模型使用按钮触发器将其呈现在场景。一旦显示,我们将隐藏焦点方块。...为了能够正确添加我们按钮,我们必须删除当前 ARSCNView首先从对象库添加UIView作为底层。接下来,选择相同ARKit SceneKit View并将其放回UIView之上。...添加按钮 我们想在视图中添加一个按钮,用作在场景添加模型触发器。对象库,将UIButton拖动到场景视图顶部。在“ 属性”检查器删除按钮”标题并将图像设置为“ 按钮/添加”。...在ViewController.swift,将一个变量声明为一个节点数组,我们将其初始化为空。

5.5K20

如何在 WordPress 创建联系表格?

在搜索框搜索 Ninja forms。你可以选择任何联系人插件。 单击安装,然后在搜索到插件上激活。 最后,插件已安装。 新选项将在你仪表板上显示为 Ninja Forms。...因此,要创建表单,请单击仪表板上 Ninja Forms 选项。 你将在 Ninja 表单中看到默认表单。 通过单击默认表单设置选项删除默认联系表单。 通过单击“添加新”按钮创建一个新表单。...以下给定选项中选择联系我们选项:空白表格、联系我们、报价请求、活动注册。 当你单击它时,你表单将被创建。 将创建一个简单联系表单,其中包含名称、电子邮件、消息和提交按钮等字段。...要添加表单,请单击标题下方添加表单选项。 弹出窗口将出现选择你在 Ninja Form 创建表单。 然后单击“插入”,表单将插入到你页面。 点击发布按钮。...⭐️ 好书推荐 《Unity手机游戏开发:搭建到发布上线全流程实战》 【内容简介】 本书将以一款开放世界游戏实践过程为主线,为读者呈现从零开始上线一款游戏实践路线、游戏引擎Unity开发模式

2.8K21

Excel编程周末速成班第18课:使用用户窗体创建自定义对话框

3.单击该窗体将其激活。然后,在工具箱单击“命令按钮”图标。 4.通过在窗体拖动将按钮放置在所需位置。...6.再次单击该窗体,然后添加另一个命令按钮将其Name属性更改为cmdClose并将其Caption属性更改为Close。...下一步也是最后一步,就是将代码添加到工程窗体显示和检索数据。 1.在“工程”窗口中,双击代码模块名称以打开其编辑窗口。 2.选择“插入➪过程”以显示“添加过程”对话框。...如果单击“Move”按钮,则该窗体将移至屏幕右上角。单击文本框将其激活,在文本框输入一些文本,然后单击“Close”按钮。...该程序将显示一个带有你输入文本消息框,显示VBA代码如何用户窗体检索数据。 这是一个简单演示。

10.8K30

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

每个任务将包含以下元素: 用于将任务标记为完成单选按钮 用于显示任务 span 元素 一个编辑按钮一个删除按钮 使用 CSS 设计样式 我们将从主体样式开始,以确保所有元素水平居中: body {...由于所有删除按钮都具有相同,因此我们使用该querySelectorAll属性来选择所有按钮。...liElement然后我们 DOM 删除最后,我们获取 li 元素 data 属性值并将其存储在名为 变量taskId。...在这个函数,我们想要执行与删除按钮相同步骤:即: 获取所有编辑按钮 使用forEach()方法迭代获取最接近li元素 获取 data-id 属性 allTasks使用 id 在数组查找任务...将删除线 CSS 添加到当前 li 元素范围 使用该findIndex()方法数组获取当前任务索引allTasks,然后将按钮状态更新为选中。

9310

分析 React 组件渲染性能

交互跟踪API 如果我们可以追踪交互行为(例如单击UI)来回答比如 “单击按钮需要多长时间才能更新DOM?” 之类问题,那就太强大了。...感谢 Brian Vaughn, React 通过新调度器包交互跟踪API对交互跟踪提供了实验支持。这里有更详细记录。 交互带有一个注释(例如“单击添加到购物车按钮”)和一个时间戳。...还应该为交互提供一个回调函数,你可以在其中执行与交互相关工作。 在电影APP,有一个 “将电影添加到队列” 按钮(+)。单击此交互将电影添加到观看队列: ?...我们可以通过单击按钮来查看所有由此产生 JavaScript 函数调用: ?...注意:React他们开发包删除了 User Timing API ,取而代之React Profiler,它提供了更准确计时。他们可能会在未来3级浏览器重新添加它。

3.4K10

如何在 React 中点击显示或隐藏另一个组件?

React 是一种流行 JavaScript 库,用于构建动态用户界面。在一个 React 应用程序,有时需要一个按钮或链接来触发显示或隐藏一个相关组件。...然后,我们在组件返回值渲染一个按钮一个条件渲染 div 元素。当用户单击按钮时,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...使用事件处理机制响应用户交互React 组件可以用 onClick 事件处理函数来响应用户单击事件。当用户单击按钮时,onClick 事件处理函数被触发,执行一些逻辑代码。...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...如果用户单击元素不在模态对话框,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。

4.4K10

邮件狂欢:Next.js和Resend SDK电子邮件魔法

下一步是按照以下步骤创建 API 密钥:导航至仪表板左侧API 密钥部分。单击页面右侧“创建 API 密钥”按钮。将出现一个包含表单模式窗口。...为API 密钥名称选择一个名称,然后单击“添加”按钮单击“添加”按钮后,将为您生成 API 密钥。您稍后将使用此 API 密钥,因此请记下它。验证发送电子邮件域必须验证将用于发送电子邮件域。...在仪表板左侧,选择域单击添加域按钮:出现一个新页面。通过在输入字段输入域来添加域。然后单击“添加”按钮。现在您已添加域,下一步是添加域名系统 (DNS) 记录。...添加您从重新发送仪表板复制所有 DNS 记录。然后单击“添加”按钮。接下来,导航回重新发送仪表板单击验证 DNS 记录按钮。之后,您仪表板状态将从“未开始”更改为“待处理”。...该POST函数是一个异步函数,用于处理传入 POST 请求。、和变量是解析请求正文中提取name。emailmessage现在,导航到项目的主页并在表单字段输入一些数据。点击“预约”按钮

97200

【译】开始学习React - 概览和演示教程

然后将其替换为其他文本。保存文件后,你会注意到localhost:3000页面会自动编译刷新数据。 继续删除/src目录所有文件,我们将创建自己样板文件,而不至于臃肿。...state状态 现在,我们将字符数据存在变量数组,并将其作为props传递。这是一个很好的开始,但是请想象下,如果我们希望能够数组删除一个项目。...你可以将状态state视为无需保存或修改,而不必添加到数据库任何数据 - 例如,在确认购买之前,在购物车添加和删除商品。 首先,我们将创建一个状态state对象。...这种特殊方法是测试索引与数组所有索引,返回除传递索引之外所有索引。 现在,我们必须将该函数传递给组件,并在每个可以调用该函数字符旁边绘制一个按钮。...在TableBody组件,我们将key/index作为参数传递,因此过滤器函数知道要删除项目。我们将创建一个带有onClick按钮将其传递。

11.1K20
领券