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

我同时使用两个按钮在一个组件中,我希望只有一个按钮工作时,我单击它而不是另一个按钮

在一个组件中同时使用两个按钮,并且只希望在单击其中一个按钮时执行相应的操作,可以通过以下步骤实现:

  1. 首先,在组件的状态中定义一个变量来标识哪个按钮被点击。例如,可以使用一个布尔类型的变量isButton1Clicked来表示按钮1是否被点击。
  2. 在按钮1的点击事件处理函数中,将isButton1Clicked设置为true,同时将isButton1Clicked的相反值false赋给按钮2的点击状态变量。这样,当按钮1被点击时,按钮2的点击状态就会被重置为未点击。
  3. 在按钮2的点击事件处理函数中,将isButton1Clicked设置为false,同时将isButton1Clicked的相反值true赋给按钮1的点击状态变量。这样,当按钮2被点击时,按钮1的点击状态就会被重置为未点击。
  4. 在组件的渲染方法中,根据isButton1Clicked的值来确定哪个按钮应该处于工作状态。可以使用条件语句(如if语句)来判断isButton1Clicked的值,并相应地设置按钮的属性(如disabled属性)或样式。

以下是一个示例代码:

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

const MyComponent = () => {
  const [isButton1Clicked, setIsButton1Clicked] = useState(false);

  const handleButton1Click = () => {
    setIsButton1Clicked(true);
  };

  const handleButton2Click = () => {
    setIsButton1Clicked(false);
  };

  return (
    <div>
      <button onClick={handleButton1Click} disabled={isButton1Clicked}>
        Button 1
      </button>
      <button onClick={handleButton2Click} disabled={!isButton1Clicked}>
        Button 2
      </button>
    </div>
  );
};

export default MyComponent;

在上述示例中,当按钮1被点击时,按钮2将被禁用,只有按钮1可以被点击。当按钮2被点击时,按钮1将被禁用,只有按钮2可以被点击。

这种方法可以确保只有一个按钮在任何时候都可以被点击,而另一个按钮则处于禁用状态。这在某些场景下可能很有用,例如在单选按钮组中只允许选择一个选项。

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

相关·内容

超详细】Figma组件属性完全指南

在过去的两个月里,一直玩这个功能,这里有一个指南,涵盖了有关组件属性的所有信息。 本指南将向您展示如何使用该功能以及何时有用。为了帮助您更好地理解这个主题,本文中添加了许多 GIF。...例如,创建了一个具有三种类型的按钮:主要、次要和再次级。每个都有 4 种状态:启用、悬停、聚焦和禁用。此外,每个都有两个图标,一个左边,一个右边,加上一个文本标签。...您可以直接从属性面板中选择整个组件并在其中交换层。 何时使用实例交换属性? 当您想在另一个组件交换组件使用它。例如,当您有一个按钮,您可以通过属性面板更改按钮内部的图标。 目前,无法交换变体。...布尔值是代码中使用的术语,表示真或假。使用此属性,您可以隐藏或显示组件的元素。例如,让我们看一个包含图标的按钮。如果您希望图标出现在按钮内,请将其切换为 ON (true)。...单击详细信息图标,然后在窗口中更改名称。 更改列表的变体顺序 当您单击一个实例并想要更改变体,您希望按字母顺序排列,或者最流行的变体顶部。 变体行上,单击详细信息图标。

10.9K22

对话框、模态框和弹出框看起来很相似,它们有何不同?

作为一名长期合同工,经常改变工作环境——当我不同的团队、公司、国家工作,措辞都会不同。词语的含义会随着时间改变,整个世界都是这样……这很正常!...然后我们将讨论在网页或网络程序同时使用这些特征我们会得到什么:对话框、弹出窗口、覆盖物和揭示框。希望当我们首先详细讨论特性,更容易区分组件本身。...使用“显式关闭”,组件允许用户通过页面上的关闭按钮和键盘上的 Escape 键关闭(当不确定时,最好同时添加两者)。...属性适用于以下 UI 组件: 位于其他页面内容之上的 UI 组件 并不总是可见的(只有发生与它们相关交互可见),也被称为“短暂存在”或“短暂出现” 通常一次显示一个不是同时显示多个。...它们共同点是它们由两个部分组成:一个是触发器元素,另一个是被触发的元素。 披露组件不会捕获焦点,没有背景,也不是模态的。它们通常使用触发器或特定的关闭按钮进行关闭或折叠。

3.4K00

React Native按钮详解|Touchable系列组件使用详解

TouchableWithoutFeedback使用详解 TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价,只响应用户的点击事件不会做任何UI上的改变,使用的过程需要特别留意...提示:无论是TouchableWithoutFeedback还是其他三种Touchable组件,都是根节点都是只支持一个组件,如果你需要多个组件同时相应单击事件,可以用一个View将它们包裹着,的这种根节点只支持一个组件的特性和...心得:disabled也是Touchable系列组件的最常用的属性之一,通常用于禁止按钮相应用户的点击事件,比如,当用户单击按钮进行登录,需要进行网络请求,在请求操作完成之前如果用户多次单击登录按钮我们通常不希望发起多次登录请求...在上面例子我们模拟了用户登录的效果,默认状态下按钮是可以响应用户点击事件的,正在登录过程我们通过disabled属性来禁用了按钮,这时无论是单击还是长按按钮都是没有任何响应的,停隔2s后,我们又将按钮解除禁用...在上述例子我们记录下用户单击按钮的时间戳,当单击结束后我们获取当前时间减去刚单击的时间,它们的差值就是用户单击按钮所用的时间了。

4.1K70

当心理学遇上设计:格式塔原理是如何服务于设计的?

当我更加深入地研究心理学对于设计工作的影响,某一天,终于恍然大悟,发现格式塔心理学原理可以和设计完美结合。 那么,格式塔究竟是什么呢?...发现并理解了格式塔原则之后,充分认识到,格式塔原则可以很好地融入到我的设计工作来。...接近律(law of proximity) Hubspot博客里曾有一句话,“当物体彼此靠近放置,这些物体会被视为一个整体不是单独的个体。” 那么,我们如何使用元素接近律来解决设计问题呢?...毫无疑问,该界面的目标是引导用户下载APP,FAQ只是一个辅助选项,只是为了让用户更好地了解他们的APP(这样的设计真的让忍俊不禁,都怀疑他们希望用户阅读常见问题解答不是去下载APP)。...下面是改进的线框图: 使用边框将所有元素包含在各自的类别,这样看起来就是一个整体不是多个杂乱元素了。

85410

「SAP ABAP」SAP包(一)【包概要简述及创建】

在学习工作通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。...---- 包的概要 SAP包的概要主要包括以下三个部分: 包的简介 包的作用 包的两个属性  包的简介   ABAP,每一个开发对象(如程序和类等)都要隶属于一个包(Package),...,执行【T-CODE:SE21】进入包构建器,打开包CBUI进行观察:   可以看到包CBUI的传输层为SAP,软件组件为S4CODE,它是一个系统包,并且勾选了选项"传输请求记录对象更改",...S4/HANA与ECC有所不同,包的类型只有开发包,主包和结构包,一般选择默认开发包即可 (三)维护好以上包的属性后如下图所示 ----  创建请求 (一)单击确定按钮后弹出可传输的工作台请求的提示对话框...  本文花费大量时间介绍了SAP包的概要以及如何创建一个包,希望能帮助到各位小伙伴,码文不易,还望各位大佬们多多支持哦,你们的支持是最大的动力!

51610

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

创建按钮组件 接下来,我们将创建一个通用的按钮组件,用于选项卡 src 文件夹创建一个名为 components 的文件夹。...组件的 props 解构了 title 和 onClick。在这里,title 是一个文本字符串,onClick 是一个单击按钮时调用的函数。...让我们继续编写函数,该函数将使用 setOpenedEditor 来更改单击选项卡按钮的 state 值。 注意:这里可能不会同时打开两个选项卡,所以我们在编写函数需要考虑到这一点。...目前的效果如下所示: 我们希望按钮显示在网格不是像上图那样垂直堆叠。...从而这就形成了一个包含 HTML、CSS、Javascript的网页。 请注意,设置 setSrcDoc ,我们使用了反引号 (``) 不是普通引号 (' ')。

11.8K30

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

创建按钮组件 接下来,我们将创建一个通用的按钮组件,用于选项卡 src 文件夹创建一个名为 components 的文件夹。...组件的 props 解构了 title 和 onClick。 在这里,title 是一个文本字符串,onClick 是一个单击按钮时调用的函数。...让我们继续编写函数,该函数将使用 setOpenedEditor 来更改单击选项卡按钮的 state 值。 注意:这里可能不会同时打开两个选项卡,所以我们在编写函数需要考虑到这一点。...目前的效果如下所示: 我们希望按钮显示在网格不是像上图那样垂直堆叠。...从而这就形成了一个包含 HTML、CSS、Javascript的网页。 请注意,设置 setSrcDoc ,我们使用了反引号 (``) 不是普通引号 (' ')。

45420

Web 性能优化:缓存 React 事件来提高性能

当我赋值 object3 = object1 将 object3 的值赋值为 object1 的地址,它不是一个新对象。....x; // false 本例在内存创建了一个对象并取名为 object1。...浅比较用于比较对象的每个键值对,不是比较内存地址。深比较更进一步,如果键-值对的任何值也是对象,那么也对这些键-值对进行比较。React 都不是:只是检查引用是否相同。...如果要将组件的 prop 从 {x:1} 更改为另一个对象 {x:1},则 React 将重新渲染,因为这两个对象不会引用内存的相同位置。...修复 如果函数不依赖于的组件(没有 this 上下文),则可以组件外部定义组件的所有实例都将使用相同的函数引用,因为该函数在所有情况下都是相同的。

2K20

使用SQL Server维护计划实现数据库定时自动备份

使用差异备份可以减小备份文件的大小,同时还可以提高备份的速度,不过缺点就是必须使用上一次完整备份的文件和差异备份的文件才能还原差异备份时刻的数据库,单独只有差异备份文件是没有意义。...(8)单击“下一步”按钮,进入“完成该向导”的界面,系统列出了向导要完成的工作,如图: (9)单击“完成”按钮,向导将创建对应的SSIS包和SQL作业: (10)完成后,我们再刷新下对象资源管理器,...这里需要注意的是,我们如果不是周日制定的该维护计划,那么制定该维护计划前一定要做个完整备份,而且该备份至少要保留到下周,不然到时候出了问题,发现只有这几个工作日的差异备份,上一次的完整备份又被删了,那就郁闷了...(2)选中Subplan_1子计划,也就是每周完整备份的子计划,将“清除历史记录”任务从工具箱拖拽到计划面板,然后面板单击“备份数据库(完整)”组件,系统将显示一个绿色的箭头,将绿色箭头拖拽到“...另外如果用过SSIS的人应该知道,一个任务完成是绿色箭头,如果是失败是红色箭头,我们这里也可以设置,如果上一步骤失败,那么将执行什么操作,双击绿色箭头,弹出的对话框中选择约束选项的值为“失败”

2.5K10

使用 React Hooks 需要注意过时的闭包!

上已经收录,文章的已分类,也整理了很多的文档,和教程资料。 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善,也希望大家能给个 star 支持一下,谢谢各位了。...Hooks 简化了 React 组件内部状态和副作用的管理。 此外,可以将重复的逻辑提取到自定义 Hooks ,以整个应用程序重复使用。 Hooks 严重依赖于 JS 闭包。...之后,即使单击Increase按钮count增加,计时器函数每2秒调用一次的log(),使用count的值仍然是0。log()成为一个过时的闭包。...快速单击2次按钮。 计数器仅更新为1,不是预期的2。 每次单击setTimeout(delay, 1000)将在1秒后执行delay()。delay()此时捕获到的 count 为 0。...4.总结 当闭包捕获过时的变量,就会发生过时的闭包问题。 解决过时闭包的有效方法是正确设置React钩子的依赖项。或者,失效状态的情况下,使用函数方式更新状态。 ~完,是小智,要去刷碗了。

1.9K30

按钮样式的正确方式

本教程,我们将为和元素以及一个自定义.btn的CSS组件创建基本样式。 你会在这个过程的每一步中找到一个演示页面。...另一个选择是使用这种风格作为mixin(使用Sass或其他预处理器)并选择性地应用它: @mixin button-reset { padding: 0; border: none; font...这是我们想要做的事情: 可应用于链接或按钮的“按钮”样式; 我们希望有选择地应用它,因为我们的页面中会有其他链接和按钮样式。 这需要一个CSS组件。...处理focus样式 还有一个棘手的问题。 多个浏览器,当您单击链接或按钮,将应用两个伪类: :active :focus 一旦停止按下鼠标按钮或触控板,“active”伪类就会停止应用。...但在某些浏览器,focus样式会一直保留,直到用户点击页面上的其他内容为止。 的测试,受影响的浏览器包括Chrome(66),Edge(16)和Firefox(60,仅用于链接)。

3.6K20

无需编写代码,利用GitHub搭建全免费个人博客

知道有几个人在博客上发了帖子,结果得到了工作机会! 帮助你学习。对知识进行回顾总结总是可以帮助我整理自己的想法,检验你是否理解某事的一个标准是你是否能向别人解释。...但是,看到的所有使用 GitHub 页面的方法都需要了解命令行和一些只有软件开发人员才可能熟悉的神秘工具。...但是,既然你正在创建一个想让其他人阅读的博客,希望公开底层文件对你来说没有问题。 设置主页 ---- 当读者第一次来到你的博客,他们首先会看到一个名为「index.md」的文件的内容。... GitHub 只有提交或者删除文件才能真正更改内容!因此,单击垃圾箱图标后,向下滚动到底部并提交更改。 通过添加一行标记,你可以文章包含图像,如下所示: !...更进一步 ---- 如果你想在你的文章添加一个目录,那么在你希望目录出现的地方添加这两行到你的文章: 1. TOC {:toc} 你创建的任何标题都将显示目录,并自动链接到各个部分。

95010

| TIA Portal SINAMICS 驱动集成的完整指南

通过单击 Startdrive 树的“调试向导”节点启动。 应用类 调试向导启动,我们看到的第一步是指定我们正在使用驱动器的应用程序的应用程序类。两个应用程序类是标准和动态。...创建对 SinaSpeed 的调用 “呼叫选项”对话框,选择为呼叫创建多实例数据库。 创建多实例数据库 让我们标记同时看看这个块的引脚。...集成人机界面 本教程试图尽可能全面,但这不是 HMI 开发教程,因此不会向您展示如何组装 HMI。在下面的屏幕截图中,您可以看到之前准备好的一个非常基本的 HMI。...本节,我们将介绍将 HMI 组件连接到 PLC 标签并使用 HMI 操作驱动器的过程。 驱动控制人机界面 标记开始、停止和重置按钮 当按下启动按钮,我们希望驱动器连续运行。...与之前的按钮不同,我们不想使用按钮设置或重置标签。相反,我们希望一个瞬时按钮一样工作,其中标签在按钮被按下为 True,在按钮被释放为 False。

2.8K30

React 16 从 setState 返回 null 的妙用

概述 React 16 为了防止不必要的 DOM 更新,允许你决定是否让 .setState 更来新状态。调用 .setState 返回 null 将不再触发更新。...例如每当单击 Mojito 按钮,我们都会看到程序对 Mojito 图像进行了不必要地重新渲染。...但是,如果我们再次单击一个mocktail按钮,React 不会重新渲染 Mocktail 组件,因为 setState 返回 null,所以状态没有改变,也就不会触发更新。...在下面的两个 GIF 突出显示了 React DevTools 的更新: ? 没有从 setState 返回 null ?...总结 本文介绍了 React 16 怎样从 setState 返回 null。在下面的 CodeSandbox 添加了 mocktail 选择程序的完整代码,供你使用和 fork。

14.4K20

【翻译】使用Tor进行匿名文件分享的开源工具 - OnionShare 2发布

或者单击“添加文件”和“添加文件夹”按钮来浏览本地文件。 MacOS沙盒 Windows和Linux只有一个“添加”按钮,可以用来选择文件和文件夹。...关于OnionShare如何工作的关键点是该网站直接托管的电脑上,不是托管某个数据中心的服务器上。 如果暂停的电脑,该链接将不再有效。...这是OnionShare的默认设置,但你可能希望使用OnionShare将文件发送给一组人,不仅仅是一个人,在这种情况下,你不希望它是短暂的。...但slug也只有两个词,并且OnionShare使用的词表是公开的,是什么阻止了攻击者通过猜测每一个可能的组合呢? ?...最后,你可能希望无头Linux服务器上运行匿名保管箱,不是你普通日常工作的电脑。 OnionShare附带两个二进制文件,onionshare(命令行版)和onionshare-gui(图形版)。

1.8K30

Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析(8000字长文)

两个组件的共同点是一组用于在数据目录和工作区之间切换的按钮以及一个搜索栏,您可以在其中按关键字和位置名称查找数据集和地点。按照上面的链接,您将进入工作区,如下图所示。...还有一个蓝色的工作打开按钮可用于将数据集添加到当前工作区(更多内容见下文)。 您可以通过单击浏览器的“返回”按钮两次或单击右上角的“数据目录”按钮返回到“数据目录”页面。...要更改地图背景,请使用地图右上角的按钮选择地图视图或卫星视图。选择地图视图,地图按钮下方将出现一个复选框,用于打开/关闭地形不是路线图视图。...要添加其他数据集,请返回到数据目录并简单地选择另一个数据集。您可以通过以下三种方式之一访问数据目录: 单击右上角按钮的数据目录按钮单击数据层列表右上角的“+”按钮。...重复数据集 您还可以将相同的数据集添加两次,作为工作两个单独图层。这样做的一个原因是查看同一数据集的两个同时间片,以查看随时间的变化。有关更多信息,请参阅下面的可视化随时间变化的部分。

19610

SoapUI和SoapUI Pro的安装

另一个有用的窗口是Log选项卡,位于SoapUI屏幕的底部。我们将在即将到来的教程详细介绍这些内容。...有效期为两个星期。许可证过期后,其他专业功能将被禁用,但基本功能可以永久使用。 以下是完成注册后将重定向到的页面。 请注意 ,以下屏幕可能会根据SmartBear软件的最新更改更改。...通过单击接受协议”单选按钮接受许可协议,然后单击“下一步”按钮。 指定目标目录。默认情况下,系统将安装在C:\驱动器。如果需要,我们可以更改目标文件夹。选择目标文件夹,然后单击下一步按钮。...安装SoapUI本身,我们已经了解了其他组件。 因此,您可以确定所需的组件,然后单击“下一步”按钮。 之后,安装向导将提示您安装LoadUI。...因此,接受许可协议,然后单击下一步。 现在我们必须指定教程的位置,因为已经“ 选择组件”向导中选中了“ 教程”组件。然后移至开始菜单的快捷方式创建向导。输入快捷方式名称后,单击“下一步”按钮

3.3K10

前端如何提高用户体验:增强可点击区域的大小

作者:Ahmad Shadded 译者:前端小智 来源:css-tricks 你是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素的特定区域,才会响应?...在下面的图中,模拟了两个按钮的不同情况。左侧,按钮更小,更远,用户需要更多的时间与它互动。右侧,按钮大小更大,更接近于的同级输入元素,这将使交互更容易、更快。 ?...按钮 需要使用实际真实(包含可点击区域)非常重要。...把鼠标悬停在按钮上,光标仍然是一个指针,这很好。不过,也可以选择文本和悬停,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。 ?...复选框和单选按钮 当存在复选框或单选按钮元素希望可以单击或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。

4.7K20

优秀组件设计的关键:自私原则

组件功能上是否没有做它所期望的事情,比如一个标签系统没有切换到正确的面板?或者太死板,不能支持设计的内容,比如一个在内容之后不是之前有图标的按钮?...对按钮内的任何内容进行格式化不是按钮的责任,而是内容本身的责任。按钮不应该关心。按钮不应该分担对其内容的责任。 体贴的组件设计的核心问题是,组件 prop 定义了内容不是组件本身。...在后来的迭代,图标需要在不同的位置可用,Button的 prop 也被迫扩展到图标的样式。 当组件对它所显示的内容负责需要一个能适应所有内容变化的API。...分担了其内容的责任,直到达到废弃的地步。按钮如何通过体现 "团队的M-E "的态度来避免这种限制? 自己,还有UI 当组件对它所显示的内容负责,它就会崩溃,因为内容将永远永远地改变。... 一个可互换的 Modal 子组件只有需要的时候才可以包含。这个组件工作方式类似于我们重构的 Button 组件

1.8K30

vue3 如何从槽发出数据

如何从槽发出数据 您知道如何通过使用范围限定的插槽将数据传递到插槽,但是如何返回通信呢? 你将一个方法传递到槽,然后调用那个方法。...我们将涵盖为什么这个工作,以及: 从槽发送到父节点 当一个槽与父线程共享作用域意味着什么 从槽发送到祖父组件 更深入地了解如何使用方法从槽返回通信 从槽发送到父节点 现在让我们来看看父组件: //...当按钮单击,我们希望调用父组件内部的一个方法。...插槽和模板作用域 以前讨论过Vue组件的作用域,但这是一种新的作用域类型,还没有讨论过。 (将其称为“模板范围”,将需要在某一刻对这篇文章进行后续工作!)...槽最终被呈现为子组件的子组件,但它不与子组件共享作用域。相反,充当父组件的子组件在这篇文章探讨了这个想法——老虎机假装不是什么东西。

1.8K30
领券