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

React 16隐藏按钮Modal不会在单击时打开

是因为在React 16中,Modal组件的显示和隐藏是通过state来控制的。当按钮被点击时,需要更新state来显示Modal。

首先,需要在React组件的state中添加一个变量来控制Modal的显示与隐藏。可以使用useState钩子函数来实现:

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

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleClick = () => {
    setShowModal(true);
  };

  return (
    <div>
      <button onClick={handleClick}>显示Modal</button>
      {showModal && <Modal />}
    </div>
  );
}

function Modal() {
  const handleClose = () => {
    setShowModal(false);
  };

  return (
    <div className="modal">
      <h1>Modal内容</h1>
      <button onClick={handleClose}>关闭Modal</button>
    </div>
  );
}

export default App;

在上述代码中,我们使用useState钩子函数来创建一个名为showModal的状态变量,并将初始值设置为false。当按钮被点击时,handleClick函数会将showModal的值更新为true,从而显示Modal组件。

在App组件的返回值中,我们使用条件渲染来判断showModal的值,如果为true,则渲染Modal组件。

Modal组件中的关闭按钮也需要更新showModal的值为false,从而隐藏Modal。

这样,当按钮被点击时,Modal就会显示出来。

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

相关·内容

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

然后,我们在组件的返回值中渲染一个按钮和一个条件渲染的 div 元素。当用户单击按钮,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...使用事件处理机制响应用户交互React 组件可以用 onClick 事件处理函数来响应用户的单击事件。当用户单击按钮,onClick 事件处理函数被触发,并执行一些逻辑代码。...当用户单击菜单按钮,菜单应该出现,然后当用户单击菜单外部,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单的显示和隐藏。...当用户单击打开模态框的按钮,模态框应该出现;当用户单击关闭按钮或模态框之外,模态框应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现模态对话框的显示和隐藏。...当用户单击关闭按钮,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示或隐藏另一个组件。

4.9K10

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

如果用户单击 confirm(确认) 按钮,promises 将解析为 true 。如果警告被解除(通过单击警告外部),promises 将解析为 null 。...通过为其指定对象 buttons ,可以根据需求设置完全相同的按钮,并指定它们在单击解析的值!...注意,我们使用 content: "input" ,以便在用户单击“确认”按钮显示输入字段并检索它的值: swal({   text: '搜索一个电影,例如:"La La Land"。'...您还可以指定false隐藏所有按钮(与button选项相同的行为)。 示例: swal({  buttons: ["Stop", "Do it!"]..., {   buttons: false,   timer: 3000, }); 方法 名称 描述 例 close 关闭当前打开的 SweetAlert ,就像按下取消按钮一样。

9.2K10
  • 《精通reactvue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件

    模态框(Modal)组件一般会有如下需求点: 能控制Modal主体的样式 提供Modal完全关闭后的回调 能控制取消按钮文字和样式 能控制确认按钮文字和样式 控制modal展示的位置 控制是否显示右上角的关闭按钮...} bool 关闭销毁Modal里的子元素 * @param {footer} null|ReactNode 底部内容,当不需要底部默认按钮,可以设置为footer={null} * @param...Modal宽度 * @param {onCancel} func 点击遮罩或者取消按钮,或者键盘esc按键的回调 * @param {onOk} func 点击确定的回调 */ function...去除mask遮罩 2.3 实现visible(带有弹窗出来和隐藏的动画animation) 熟悉antd或者element的朋友都知道,visible用来控制modal的显示和隐藏,我们这里也来实现同样的功能...要想实现该功能,我们需要处理如下几个事件: 当点击关闭按钮,根据destroyOnClose销毁子组件 当点击确认按钮,根据destroyOnClose销毁子组件 当visible为true,根据destroyOnClose

    2.7K11

    React中的模式对话框 转

    16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。...例如这个项目:https://github.com/reactjs/react-modal。 将模式对话框放置到HTML结构的顶层,将其设置为 document.body 的子元素。...例如:https://github.com/tajo/react-portal 将模式对话框作为整个组件结构中的顶层组件(根元素的子组件),通过全局的数据来控制他显示或隐藏。...App.jsx——整个工程的根组件,通常不会在这里有什么特殊的处理。它首先会渲染其他所有的顶层组件,然后再最后渲染模式对话框组件。...export default SignIn; 他内部使用了一个名为 ModalWrapper 的包装组件,用来显示模式对话框的效果,可以直接使用https://github.com/reactjs/react-modal

    2.2K30

    微信小程序开发实战(16):交互组件

    图3 带图像的ActionSheet 2 对话框 在小程序中,对话框需要使用标签。与Android、iOS不同的是,这些对话框需要实现摆放在布局文件中,默认是隐藏状态。...例如,下面的布局代码放置了两个标签,并通过点击相应的按钮显示其中一个对话框。...">点击弹出modal2 标签通过title属性指定标题,通过confire-text属性指定确定按钮的文本,通过cancel-text...属性指定取消按钮的文本,通过hidden属性控制对话框的隐藏和显示,通过bindconfirm属性指定点击确定按钮要指定的函数,通过bindcancel属性指定点击取消按钮要执行的函数。...实际上,这里指的关闭,就是隐藏标签,实现的代码如下: Page({ data: { modalHidden: true, modalHidden2: true },

    89220

    一天梳理完react面试高频知识点

    在使用 Genymotion,首先需要在SDK的 platform-tools中加入环境变量,然后在 Genymotion中单击 Setting,选择ADB选项卡,单击 Use custom Android...SDK tools,浏览本地SDK的位置,单击OK按钮就可以了。...纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上,纯函数始终在给定相同参数的情况下返回相同结果。...16中新生命周期有哪些关于 React16 开始应用的新生命周期: 可以看出,React16 自上而下地对生命周期做了另一种维度的解读:Render 阶段:用于计算一些必要的状态信息。...这个阶段可能会被 React 暂停,这一点和 React16 引入的 Fiber 架构(我们后面会重点讲解)是有关的;Pre-commit阶段:所谓“commit”,这里指的是“更新真正的 DOM 节点

    1.3K30

    React Navigation 3x系列教程』之createStackNavigator开发指南

    用于导航样式配置的参数: mode: 页面切换模式: 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) card: 普通app常用的左右切换...modal: 上下切换。 headerMode: 导航栏的显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏。...none: 隐藏导航栏。 headerBackTitleVisible : 提供合理的默认值以确定后退按钮标题是否可见,但如果要覆盖它,则可以使用true或` false 在此选项中。...元素或组件在标题的后退按钮中显示自定义图片。...当用户单击Go Back按钮,通过: navigation.goBack(); 实现了返回上一页; 类似上述的应用场景有很多,大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线

    5K10

    Jump Start Bootstrap 第4章

    Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件在句柄被单击触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件在菜单被显示触发...当你点击按钮,你会看到一个类似于插图效果的样式;在再次单击,它返回到原来的样式,如图所示。data-toggle=”button”实现了这个切换功能。 ?...添加data-dismiss使按钮单击关闭模式对话框。 对于本体,我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。...Bootstrap模式对话框有一个选项,当单击该句柄,将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。...与Bootstrap模式对话框相关的事件包括: show.bs.modal: 即将打开对话框前触发 shown.bs.modal: 打开对话框后触发 hide.bs.modal: 即将隐藏对话框前触发

    28.3K40

    原生javascript组件开发之Web Component实战

    目前vue或者react框架中也支持使用Web Component,而且在Web Component中也可以动态的调用react或者vue的api来实现组件或页面的渲染,这给我们开发者提供了更大的自由度...Web Component组件开发实战 在开发之前,我们先来看看实现效果: 第一张图是我们的自定义按钮组件(Button), 图二是笔者实现的弹窗(modal)组件。...接下来的重点是关闭按钮和控制Modal显示和隐藏的逻辑,这块逻辑我们应该放在Modal组件内部来实现,我们不可能通过外部操作dom样式来控制Modal的显示和隐藏。...我们先来回忆一下,antd组件或者elementUI的Modal可以通过传入visible属性来控制Modal的显示和隐藏,而且我们点击右上角的关闭按钮,可以不改变任何属性的情况下关闭Modal,那么我们想想是怎么做到的呢...首先对于关闭按钮来说,我们可以绑定一个事件,通过控制内部样式来让Modal隐藏。对于用户在外部修改了visible属性,我们如何让它自动随着visible的变化而显示或者隐藏呢?

    2K20

    教你使用HTML5原生对话框元素,轻松创建模态框组件

    -- 按钮触发模态框 --> ...三、对话框操作API 下面是一个基本的对话框,因为没有设置open属性,所以它不会在视觉上显示任何东西。您需要使用JavaScript API来显示/隐藏它。 这是dialog对话框!...用.showModal()打开的对话框会有一个全窗口的半透明背景层,阻断用户与对话框之外的页面元素对象进行交互,同时对话框会默认显示在窗口正中间(上下左右都居中);而用.show()打开的对话框会默认显示在窗口顶部...表单提交后,它会关闭对话框并设置dialog.returnValue到value已使用的提交按钮。 此外,您可以使用该autofocus属性在弹出对话框自动将焦点对准对话框内的窗体控件。...//dosomething... }; }); 四、浏览器兼容性 桌面浏览器只有谷歌浏览器支持dialog的完整功能(到本博文发表

    4.9K10

    用Node.js把HTML转成PDF格式

    当你在截图之前需要操纵 DOM(例如隐藏打印按钮,它是非常方便的。我看到过很多使用这个包的项目。但不幸的是,这不是我们想要的,因为我们需要在后端完成对 PDF 的创建工作。...', 100, 100) 16 17doc.end() 这段代码段来自 PDFKit 文档。...首先,我们启动浏览器(仅在 headless 模式下支持 PDF 生成),然后打开新页面,设置视口,并导航到提供的URL。...如果单击“保存”按钮,那么浏览器将会保存 PDF。 在 Docker 中使用 Puppeteer 我认为这是实施中最棘手的部分 —— 所以让我帮你节省几个小时的百度时间。...display: none; 4 } 5 6 .content div { 7 break-after: always; 8 } 9} 上面的 CSS 隐藏了打印按钮

    6.5K30

    C#学习笔记——show()与showDialog()的区别

    单击“关闭”按钮隐藏窗体,并将DialogResult属性设置为DialogResult.Cancel 与无模式窗体不同,当用户单击对话框的关闭窗体按钮或设置DialogResult属性的值,不调用窗体的...Close方法 实际上是把窗体的Visible属性赋值为false,隐藏窗体了 这样隐藏的窗体是可以重新显示,而不用创建该对话框的新实例 因为未关闭窗体,所以在应用程序不再需要该窗体,请调用该窗体的...利用Form.Modal属性,如果该窗体是模式显示,则为true,否则为false 根据通过Show和ShowDialog而显示出来的窗体的Modal属性分别对应false和true 特别注意:...由于在窗体创建之前是无法得知显示方式的,所以在窗体构造函数中,Modal属性总是对应false,所以我们只能在Load事件中或者之后利用Modal属性值 怎么确定窗体间的所有者关系?...f1.Form1Value = 222; 5.通过窗体的公有属性值和Application.OpenForms属性 说明:Application.OpenForms属性:获取属于应用程序的打开窗体的集合

    2K41

    分层 Blazor 组件

    作为加入单页应用程序 (SPA) 队伍的最新框架,Blazor 有机会在其他框架(如 Angular 和 React)的最佳特性基础之上构建而成。...此标记包含包装器 Modal 元素及其两个子级子树:一个用于切换按钮,一个用于实际内容。 根据模式的 Bootstrap 语法,任何对话框都需要显示触发器。...总之,根据上面的代码片段,生成的 UI 由标记为“打开”的主按钮组成。在获得单击后,此按钮便会立即弹出填充有以下三层的 DIV:页眉、正文和页脚。...在 Bootstrap 行话中,对话框切换按钮的数据目标属性标识,要在用户单击切换按钮弹出的 DIV 的 ID。...使用 ID 签名的 DIV 会在模式触发弹出。相反,AutoClose 值用于控制 IF 语句,此语句决定了是否应在标题栏中显示“关闭”按钮

    8.3K10

    《精通reactvue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件

    vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件 《精通react/vue组件设计》之快速实现一个可定制的进度条组件 《精通react/vue组件设计》之基于jsoneditor...一个抽屉(Drawer)组件会有如下需求点: 能控制抽屉是否可见 能手动配置抽屉的关闭按钮 能控制抽屉的打开方向 关闭抽屉是否销毁里面的子元素(这个问题是工作中频繁遇到的问题) 指定 Drawer 挂载的...HTML 节点, 可以将抽屉挂载在任何元素上 点击蒙层可以控制是否允许关闭抽屉 能控制遮罩层的展示 能自定义抽屉弹出层样式 可以设置抽屉弹出层宽度 能控制弹出层层级 能控制抽屉弹出方向(上下左右) 点击关闭按钮能提供回调供开发者进行相关操作...我们关闭抽屉希望表单中用户输入的内容清空,保证下次进入时用户能重新创建, 但是实际情况是如果我们不销毁抽屉里的子组件, 子组件内容不会清空,用户下次打开开始之前的输入,这明显不合理....一种是用户不配置属性,那么默认就挂载到body下,还有就是用户传的值为false, 那么就为最近的父元素, 他如果传一个dom元素,那么将挂载到该元素下,所以以上代码我们会分情况考虑,还有一点要注意,当抽屉打开

    1.7K31
    领券