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

如何关闭在React + Redux应用程序中单击外部的模式窗口?

在React + Redux应用程序中关闭单击外部的模式窗口可以通过以下步骤实现:

  1. 首先,在React组件中创建一个状态变量来控制模式窗口的显示与隐藏。可以使用useState钩子函数或者class组件的state来实现。
  2. 在模式窗口的外部区域添加一个点击事件处理程序,用于关闭模式窗口。可以使用React的事件委托机制,在父组件上监听点击事件。
  3. 在点击事件处理程序中,判断点击的目标元素是否在模式窗口内部。可以通过使用ref来获取模式窗口的DOM元素,并使用DOM API中的contains方法进行判断。
  4. 如果点击的目标元素不在模式窗口内部,则将模式窗口的显示状态设置为隐藏,即更新状态变量。

下面是一个示例代码:

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

const Modal = () => {
  const [showModal, setShowModal] = useState(false);
  const modalRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        setShowModal(false);
      }
    };

    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      {showModal && (
        <div ref={modalRef}>
          {/* Modal content */}
          <h1>Modal Window</h1>
          <p>This is a modal window.</p>
        </div>
      )}
    </div>
  );
};

export default Modal;

在上述示例中,点击"Open Modal"按钮可以打开模式窗口,点击模式窗口外部区域可以关闭模式窗口。模式窗口的显示状态由showModal状态变量控制。通过ref获取模式窗口的DOM元素,并在点击事件处理程序中判断目标元素是否在模式窗口内部,从而决定是否关闭模式窗口。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ai
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(Tencent Blockchain):https://cloud.tencent.com/product/tencentblockchain
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

设计师都能懂 Redux 指南

有时候 React 内置功能运行得足够好。但随着应用程序变得越来越复杂,仅凭React 可能会更难管理它状态。这就是为什么许多人开始使用Redux作为替代。...但是 Shotwell 是如何将配料传递给其他厨师呢? 如何将数据传递给实际渲染 HTML 元素组件? 我们将数据从外部组件传递到内部组件,就像接力棒一样,一直传递到数据到达目的地。...因此,如果你团队使用 Redux 唯一原因是为了提取数据,不妨认真考虑升级到 React 16.3! 改变数据 有时候,应用程序更新数据逻辑可能相当复杂。它可能涉及多个相互依赖步骤。...开发人员单击“重播错误”按钮并观察错误是如何发生。 bug 被当场压扁,每个人都很开心! Redux Bug Reporter 就是这样玩。它工作原理呢?Redux 限制条件让一切变成可能。...Redux 一般思想适用于任何地方 只要你明智地使用 Redux,你可以很多情况下得到它好处,而不仅仅是React应用。 总结 有不可避免缺点。

1.6K10

从设计角度看 Redux

有时候 React 内置功能运行得足够好。但随着应用程序变得越来越复杂,仅凭React 可能会更难管理它状态。这就是为什么许多人开始使用Redux作为替代。...但是 Shotwell 是如何将配料传递给其他厨师呢? 如何将数据传递给实际渲染 HTML 元素组件? 我们将数据从外部组件传递到内部组件,就像接力棒一样,一直传递到数据到达目的地。...因此,如果你团队使用 Redux 唯一原因是为了提取数据,不妨认真考虑升级到 React 16.3! 改变数据 有时候,应用程序更新数据逻辑可能相当复杂。它可能涉及多个相互依赖步骤。...开发人员单击“重播错误”按钮并观察错误是如何发生。 bug 被当场压扁,每个人都很开心! Redux Bug Reporter 就是这样玩。它工作原理呢?Redux 限制条件让一切变成可能。...Redux 一般思想适用于任何地方 只要你明智地使用 Redux,你可以很多情况下得到它好处,而不仅仅是React应用。 ? 总结 有不可避免缺点。

1.7K30
  • 滴滴前端常考react面试题(附答案)

    如果没有key,Rεat就不知道列表虚拟DOM元素与页面哪个元素相对应。所以创建列表时候,不要忽略key。 ReactNative如何解决 adb devices找不到连接设备问题?...使用 Genymotion时,首先需要在SDK platform-tools中加入环境变量,然后 Genymotion单击 Setting,选择ADB选项卡,单击 Use custom Android...无论你何处渲染一个 ,都会在应用程序 HTML 渲染锚()。...但是Redux状态更改可回溯——Time travel,数据多了时候可以很清晰知道改动在哪里发生,完整提供了一套状态管理模式。...通过 reduxreact context 配合使用,并借助高阶函数,实现了 react-redux React ,refs 作用是什么Refs 可以用于获取一个 DOM 节点或者 React

    2.3K10

    React-全局状态管理群魔乱舞

    正如我们看到早期,无论何种React应用都「无脑」投入到Redux生态。 随着,社区完善和进步,大家逐渐发现Redux并不是解决React状态管理「银弹」。...一个直观API应该是符合人们现有心智模式。很多时候,心智模式冲突会导致使用该库学习和应用曲线陡增。React,一个常见心智模式冲突是状态「可变与不可变」。...与并发模式兼容性 「并发模式」允许React「渲染过程 "暂停 "并切换优先级」。以前,这个过程是完全同步React引入并发特性,通常会引入「边缘案例」。...它没有关于如何结构化或管理状态意见。这意味着开发人员处理开发前端应用程序中最复杂部分时,只能靠自己。...随着应用程序发展,Redux 倾向于「吸纳所有的状态」,不管它是什么类型,因为它提倡单一存储。 这通常会「导致将所有的东西存储一个大单体存储」。

    3.7K20

    优化 React APP 10 种方法

    如何优化性能以提供出色用户体验。 开发任何软件(尤其是Web应用程序)时,优化是每个开发人员考虑第一件事。像Angular,React等其他JS框架都包含了一些很棒配置和功能。...示例:搜索bit.dev上共享React组件 1. useMemo() 这是一个React钩子,用于React消耗大量CPU资源函数中进行缓存。...2.虚拟化长列表 如果呈现大型数据列表,建议一次浏览器可见视口内仅呈现一小部分数据集,然后列表滚动时呈现下一个数据,这称为“窗口” 。...文本框输入2并Click Me连续单击按钮,我们将看到ReactComponent将被重新渲染一次,并且永远不会被渲染。 它将上一个道具和状态对象字段与下一个道具和状态对象字段进行浅层比较。...为了React延迟加载路由组件,使用了React.lazy()API。 延迟加载已成为现在广泛用于加快加载时间优化技术之一。延迟加载前景有助于将某些Web应用程序性能问题风险降至最低。

    33.9K20

    2016 JavaScript 技术栈展望

    Redux 现在,我们已经具有了开发视图层能力,接下来,我们需要使用其他工具管理应用程序状态和生命周期,在这里推荐工具就是:Redux。... Redux ,大多数组件都是纯函数式组件,也只有一个集中存储和资源中心。Redux 实例方法负责整个数据操作和维护。相比 Flux 来说,Redux 思路更加清晰。...Lodash JavaScript 并没有一个类似 Java 或 .NET 核心工具库,所以开发者大都会从外部引用一个外部工具库。 目前来说,Lodash 是此类工具佼佼者。... 4.x 版本,Lodash 为偏爱函数式编程开发者提供了一个“函数式开发”模式。 如果你熟悉函数式编程,你可以了解一下 Ramda。...本质上,Electron 内部封装了一个 Node.js,可以打开 Chrome 窗口渲染 UI,还可以访问操作系统本地 API,并且没有浏览器沙盒机制。

    2.1K40

    阿里前端二面react面试题_2023-02-28

    Redux实现原理解析 为什么要用redux React,数据组件是单向流动,数据从一个方向父组件流向子组件(通过props),所以,两个非父子组件之间通信就相对麻烦,redux出现就是为了解决...如何React构建( build)生产模式? 通常,使用 Webpack DefinePlugin方法将 NODE ENV设置为 production。... ReactNative如何解决 adb devices找不到连接设备问题?...使用 Genymotion时,首先需要在SDK platform-tools中加入环境变量,然后 Genymotion单击 Setting,选择ADB选项卡,单击 Use custom Android... commit 阶段React 会根据前面为各个节点打的 Tag,一次性更新整个 dom 元素 React StrictMode(严格模式)是什么??

    1.9K20

    探索 React 状态管理:从简单到复杂解决方案

    引言React状态管理构建动态和交互式Web应用程序扮演着至关重要角色,如果你想在React工作,了解它是非常重要,实际上是最重要事情。...Redux用于集中式状态管理进入更复杂场景时,我们引入了Redux,这是一个广泛采用用于管理应用程序状态库。...通过一个逐步例子,我们演示了如何Redux集成到React应用程序以有效地处理状态更改。...请注意,这是经典redux例子,今天没有人使用它,而是使用了一个被称为redux toolkit东西,它与redux概念相同,但更容易使用,我们将在下一篇博客完全了解redux toolkit以及它是如何简化我们生活...父组件,我们使用react-reduxProvider组件将Child组件包装起来,并将Redux store作为属性传递。

    45231

    「首席架构师推荐」React生态系统大集合

    官方教程 Visual Studio代码中使用React Scrimba - 以交互方式免费学习React FreeCodeCampReact挑战 ReactCheatsheet React模式 使用...- React中生成复杂,经过验证和扩展基于JSON表单 Redux-Autoform - 从元数据动态创建Redux-Forms uniforms - 一堆React组件和帮助器,可以轻松生成和验证表单...CoffeeScript实现Flux React:Flux Architecture 了解Flux FluxReact.js架构 - Flux VS Reflux 避免单页应用程序事件链...redux-thunk - 用于reduxThunk中间件 redux-logger - 用于reduxLogger中间件 reselect - Redux选择器库 normalizr - 根据模式规范化嵌套...- 一个简单redux中间件,用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 ES6使用ReactRedux

    12.4K30

    《从零开始学ASP.NET CORE MVC》:VS2019创建ASP.NET Core Web程序(三)

    单击“创建新项目”。...创建空模板 第8步:取消选中“为 HTTPS 配置”复选框 ,如上图所示,关闭身份验证。 此屏幕显示可用于创建ASP.NET Core应用程序不同项目模板。...Views文件夹,我们有示例视图文件和布局文件,它们代表Web应用程序用户界面。我们还有Web应用程序通常需要JavaScript和CSS文件。 ?...Angular,React.js,React.js和Redux:这三个模板允许我们与Angular,ReactReactRedux一起创建asp.net Core Web应用程序。...在下一篇文章,我们将探索和理解ASP.NET Core 项目文件。 摘要 本文中,我尝试解释如何使用从头开始创建项目,以及不同类型模板区别。我希望这篇文章可以帮助您满足您需求。

    3.9K20

    阿里前端二面必会react面试题总结1

    可以使用自定义事件通信(发布订阅模式)可以通过redux等进行全局状态管理如果是兄弟组件通信,可以找到这两个兄弟节点共同父节点, 结合父子间通信方式进行通信。...通过 shouldComponentUpdate方法返回 false, React将让当前组件及其所有子组件保持与当前组件状态相同。如何React构建( build)生产模式?...容器组件经常是有状态,因为它们是(其它组件)数据源。 ReactNative如何解决 adb devices找不到连接设备问题?...使用 Genymotion时,首先需要在SDK platform-tools中加入环境变量,然后 Genymotion单击 Setting,选择ADB选项卡,单击 Use custom Android...**虚拟 DOM 优越之处在于,它能够提供更爽、更高效研发模式(也就是函数式 UI 编程方式)同时,仍然保持一个还不错性能。React中发起网络请求应该在哪个生命周期中进行?为什么?

    2.7K30

    《从零开始学ASP.NET CORE MVC》:VS2017创建ASP.NET Core Web程序(三)

    Visual Studio2017创建新ASP.NET Core 项目 步骤1:Visual Studio 2017创建新asp.net Core项目 步骤2:Visual Studio单击文件...第3步:“新建项目”对话框,展开 “已安装”。然后展开“Visual C#”并 选择.NET Core 第4步:中间窗格,您将找到所有已安装项目模板。...Views文件夹,我们有示例视图文件和布局文件,它们代表Web应用程序用户界面。我们还有Web应用程序通常需要JavaScript和CSS文件。 ?...Angular,React.js,React.js和Redux:这三个模板允许我们与Angular,ReactReactRedux一起创建asp.net Core Web应用程序。...在下一篇文章,我们将探索和理解ASP.NET Core 项目文件。 摘要 本文中,我尝试解释如何使用从头开始创建项目,以及不同类型模板区别。我希望这篇文章可以帮助您满足您需求。

    2.8K30

    【19】进大厂必须掌握面试题-50个React面试

    React中有什么事件? React,事件是对特定动作(如鼠标悬停,鼠标单击,按键等)触发反应。处理这些事件类似于处理DOM元素事件。...React如何创建表单? React表单类似于HTML表单。但是React,状态包含在组件state属性,并且只能通过setState()进行更新。...用Redux开发应用程序易于测试,并且可以表现出一致行为不同环境运行。 37. Redux遵循三个原则是什么? 单一事实来源:整个应用程序状态存储单个存储对象/状态树。...减速器–一个确定状态如何变化地方。 商店–整个应用程序状态/对象树保存在商店。 查看–仅显示商店提供数据。 40.显示数据如何流过Redux? 等你来回答。...41.Redux如何定义动作? React动作必须具有type属性,该属性指示正在执行ACTION类型。必须将它们定义为String常量,您也可以为其添加更多属性。

    11.2K30

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

    React 是一种流行 JavaScript 库,用于构建动态用户界面。一个 React 应用程序,有时需要一个按钮或链接来触发显示或隐藏一个相关组件。...全局状态(也称为应用程序状态)则是整个应用程序状态,可以从不同组件访问和修改。本文中,我们将关注本地状态。 React ,使用 useState 钩子可以创建本地状态。...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...当用户单击打开模态框按钮时,模态框应该出现;当用户单击关闭按钮或模态框之外时,模态框应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现模态对话框显示和隐藏。...这些示例可以用作参考,帮助你自己 React 应用程序实现点击显示或隐藏另一个组件功能。

    4.9K10

    「前端架构」Grab前端学习指南

    这种模式与本地移动应用程序工作方式类似。 好处: 这款应用响应速度更快,而且由于页面刷新,用户页面导航之间看不到flash。...React特点: 说明性——你描述你想在视图中看到什么,而不是如何实现它。jQuery时代,开发人员必须想出一系列操作DOM步骤,才能从一个应用程序状态切换到下一个应用程序状态。...大多数情况下,React组件由支柱(外部参数)和状态(内部数据)定义。对于相同道具和状态,会产生相同视图。纯函数易于测试,功能组件也是如此。...毕竟,React只是一个视图层,它并没有规定如何在传统MVC模式构建应用程序其他层,比如模型和控制器。...声明式编程工作得很好——存储可以向视图发送更新,而不需要指定如何在状态之间转换视图。 由于Flux本身不是一个框架,开发人员已经尝试了很多Flux模式实现。

    7.4K20

    纯前端控件集 WijmoJS 2018V2发布,React、Vue和Angular更易用

    全球率先支持 AngularJS外,现已全面应用于 React、Vuejs、TypeScript 、Ionic 等主流框架。...开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序。 要在VSCode安装此扩展,请单击VS Marketplace上Designer设置“安装”按钮。...或者,还可以VSCode扩展管理器搜索“wijmo”并从那里安装。 安装后重新加载VSCode。 然后打开一个使用WijmoJS 控件Angular应用程序并尝试启动设计器。...新React / Redux加密货币跟踪应用程序 本次更新为使用ReactRedux WijmoJS 控件集增加了加密货币跟踪应用程序,该应用程序是一个财务仪表板,可用于跟踪加密货币值,这些值是在用户开发生产应用程序之后建模...使用React / Redux现代设计模式和各种WijmoJS 控件,可以帮助用户更好地评估和开发 WijmoJS 应用程序

    7K20

    Redux 快速上手指南

    任何UI组件都可以直接从store访问特定对象状态。 Redux,所有的数据(比如state)被保存在一个被称为store容器一个应用程序只能有一个store对象。...不管什么应用程序都需要有App state(应用程序状态),不论是一个需要用户登录应用,要有全局记录着用户登录状态,或是应用程序不同操作介面(组件)或各种功能上数据沟通,都需要用到它。...简单应用程序,这沟通方式还可行,但如果是在有复杂组件嵌套阶层结构时,例如层级很多或是不同树状结构子组件要互相沟通时,这个作法是派不上用场。...它这个设计并非是独创,这在设计模式类似于pub-sub(发布-订阅)系统,Dispatcher则是类似Eventbus概念。...首先,Chrome安装Redux Devtools扩展; 然后,在运行Redux应用程序终端里使用Ctrl+C停止服务器。

    1.3K20

    21个让React 开发更高效更有趣工具

    React Sight 你有没有想过你应用程序流程图中样子? React Sight允许你通过展示整个应用程序实时组件层次结构树来可视化React应用程序。...它还支持react-router,Redux以及React Fiber。 使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树组件直接相关组件链接。...如果在查看结果时遇到问题,可以地址栏输入chrome:extensions ,查找“React Sight”框,然后单击“Allow access to file URLs”开关,如下所示: 12....模拟每个外部依赖项(API响应、localStorage等)。 查看应用程序状态与运行实例交互时实时演变。 13....React Bits React Bits是一个React模式、技术、技巧和技巧集合,所有这些都以类似于在线文档格式编写,你可以同一个选项卡上快速访问不同设计模式和技术、反模式、样式、UX变体以及其他与

    2.4K30

    一天梳理完react面试高频题

    (3)使用 、 、 组件 组件来在你应用程序创建链接。...无论你何处渲染一个 ,都会在应用程序 HTML 渲染锚()。...传统页面的开发模式,每次需要更新页面时,都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。在前端开发,性能消耗最大就是 DOM 操作,而且这部分代码会让整体项目的代码变得难 以维护。...单向数据流模式,所以props是从父组件传入子组件数据Redux 异步请求怎么处理可以 componentDidmount 中直接进⾏请求⽆须借助redux。...,会根据差异对界面进行最小化渲染按需更新 差异话计算react可以相对准确知道哪些位置发生了改变以及该如何改变,这保证按需更新,而不是宣布重新渲染Reduxconnect有什么作用connect

    4.1K20
    领券