如何在发送并更改应用程序在React中的状态时关闭模式窗体？
在React中关闭模态窗体并更改应用程序的状态可以通过以下步骤实现：
- 在React组件中创建一个状态变量来控制模态窗体的显示与隐藏。可以使用useState钩子函数来创建状态变量，并将初始值设置为false，表示模态窗体默认是关闭的。
import React, { useState } from 'react';
function App() {
const [showModal, setShowModal] = useState(false);
// 其他组件代码...
return (
<div>
{/* 模态窗体 */}
{showModal && (
<div className="modal">
{/* 模态窗体内容 */}
<div className="modal-content">
<h2>模态窗体标题</h2>
<p>模态窗体内容</p>
<button onClick={() => setShowModal(false)}>关闭</button>
</div>
</div>
)}
{/* 其他组件内容 */}
</div>
);
}
export default App;- 在需要打开模态窗体的地方，通过设置状态变量来显示模态窗体。可以在按钮的点击事件中调用setShowModal函数将状态变量设置为true。
<button onClick={() => setShowModal(true)}>打开模态窗体</button>- 在模态窗体的关闭按钮点击事件中，调用setShowModal函数将状态变量设置为false，从而关闭模态窗体。
<button onClick={() => setShowModal(false)}>关闭</button>通过以上步骤，就可以在React中实现关闭模态窗体并更改应用程序状态的功能。在模态窗体中，可以根据实际需求添加更多内容和样式。
相关·内容
2回答
我如何连接我的形式和模式？
javascript、html、css、reactjs、bootstrap-modal
我用react做了一个表单项目。我的表单现在运行良好，但是我希望在我的表单中添加引导模式。
当我单击enter按钮时，我想显示一个模式。我在网上找到了模态的例子，但是我不能建立形式和模态之间的联系。这是我的表格
import React from "react";
import { useState } from "react";
const Contact = () => {
const [showModal, setShowModal] = useState(false);
const [inputValue, setInputValue]
浏览 6提问于2022-08-10得票数 1
1回答
使用父状态处理模态可见性，而将其处理为imperativeHandle和模态状态
javascript、reactjs、react-hooks
我需要实现一个可重用的模式。我脑海中基本上有两种实现。
处理父状态下的模态可见性。然后，我必须将状态设置器传递到模态组件中，因为在模态中总是有一个按钮来关闭模态。
const Modal = (props) => {
return (
<div>
<button onClick={() => props.setVisibility(false)}>Cancel</button>
</div>
);
};
export default function App() {
const [
浏览 6提问于2022-08-15得票数 0
回答已采纳
1回答
模式未关闭
javascript、html、reactjs、state、use-state
在react.js中，当背景组件被点击并且背景组件被隐藏时，我希望setShowModal为false，但setShowModal不是false，甚至不显示console.log ('a')。 import { useState } from 'react';
import Backdrop from './Backdrop';
import Modal from './Modal';
function Todo(props) {
const [showModal, setShowModal] = useState(fa
浏览 20提问于2021-09-28得票数 0
2回答
如何将组件重置为它的初始状态
javascript、reactjs
我有以下问题:我已经将模式的标记/代码移动到了一个单独的组件中，因为文件变得相当长，我可能需要在其他地方使用它。
我得到了它，这样我就可以打开它并关闭它，但是如果我想重新打开它，它就不能工作。我怀疑这是因为我设置了一个标志，当我单击close时将它显示给false，但是我不能重置它，所以它会重新打开。
我的代码如下
主组件中的
const [showModal, setShowModal] = React.useState(false);
...
<button
onClick={() => setShowModal(true)}
type="button"
cl
浏览 4提问于2021-07-18得票数 0
回答已采纳
2回答
React当从OverlayTrigger在一个模态中打开时，引导输入文本失去焦点。
reactjs、react-bootstrap
我在一个模式中有一个按钮，点击打开一个popover组件，在popover中我有一个输入文本字段。
我的问题是输入立刻失去了焦点，我不能输入它，因为其他东西正在从它中劫持焦点，而我不知道是什么，是这个问题的一个工作示例。
下面是有问题的代码：
import "./styles.css";
import { Fragment, useState } from "react";
import { Button, Modal, OverlayTrigger, Popover, Form } from "react-bootstrap";
expor
浏览 12提问于2022-04-18得票数 0
回答已采纳
1回答
当我将状态从父母传递给孩子时，它是以未定义的方式传递的
reactjs、react-hooks
因此，我试图在react中构建一个模态，当我使用useState向子节点传递一个状态时，它被作为未定义的方式传递。我希望只有当它是真的时才能显示出来。当我控制台来自父程序的日志时，它显示为false，因为我已经设置了它，但是在子日志中，它说没有定义，什么也没有发生。我正计划在单击时将状态更改为true。
父母--
import React, { useState } from 'react'
import Modal from './Modal'
function AddNewTodo() {
const [ShowModal,setShowModal
浏览 0提问于2022-06-13得票数 -2
2回答
如何卸载React功能组件？
reactjs、react-state
我已经构建了几个通道作为React功能组件。它们是通过isModalOpen布尔属性在模态的关联上下文中显示/隐藏的。这样做效果很好。
现在，由于各种原因，一位同事需要我重构这段代码，而不是在更高的级别上控制模式的可见性。下面是一些示例代码：
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import { UsersProvider } from '../../../contexts/UsersContext';
impo
浏览 24提问于2019-11-14得票数 2
回答已采纳
2回答
反应: stopPropagation()似乎不起作用？
javascript、reactjs、stoppropagation
我有一个页脚组件，它具有切换模态组件的功能。在模态组件中，我有一个用于背景的包装器，以及嵌套在该包装器中的模式。我已经将toggleModal函数设置为一个支柱，并将其添加到模型的包装器中。我不希望模式本身分配这个单击函数，所以我在函数中使用了stopPropagation()来停止事件冒泡，尽管这似乎不起作用。
页脚组件：
const Footer = () => {
const [showModal, setShowModal] = useState(false);
function toggleModal(e) {
e.stopPropagation();
浏览 4提问于2020-03-30得票数 1
1回答
打开模式时，我怎么能不删除客户端呢？
reactjs
当用户删除客户端时，我创建了一个询问用户的模式(您确定要删除它吗)。问题是，一旦模式打开，客户端就会被删除，即使用户没有单击“是”来确认删除。
ClientList.js
export default function ListClients() {
const [showModal, setShowModal] = useState();
const [userlist, setUserlist] = useState([]);
function deleteClient() {
const userParams = {
clientName:
浏览 2提问于2022-02-22得票数 0
2回答
从导航栏打开React JS Modal
javascript、reactjs
所以基本上我想打开导航栏中的Modal using按钮。当你在主页上，你可以看到导航栏在顶部，然后下面是HeroSection……
这是我的代码：
Navbar.js：
import React, { useState } from 'react';
import { Button } from './Button';
import { Link } from 'react-router-dom';
import './Navbar.css';
import * as openModal from "./HeroSecti
浏览 1提问于2021-03-02得票数 1
1回答
React Semantic UI Modal doesn图标不工作
javascript、reactjs、semantic-ui
我想为我的应用程序做一个模式。我已经尝试了所有的方法，但是我的关闭图标不能关闭我的模式。当我在相同的文件中做模式时，它工作得很好，但是我想让我的模式作为单独的组件。我的代码有问题吗？
父组件：
import { Card, Placeholder, Image, Icon } from "semantic-ui-react";
import BookModal from "./BookModal";
import { useState } from "react";
const BookCard = props => {
con
浏览 4提问于2021-09-21得票数 0
1回答
启用onHide函数时响应引导模式不打开
reactjs、react-bootstrap、react-modal
我注意到，当我设置以下条件时，我的反应引导模式不会打开：onHide={props.setShowModal(false)}。当我将它更改为onHide={props.setShowModal(true)}时，它始终保持打开状态。
出什么问题了？
父母JS？
const [showModal, setShowModal] = useState(false);
<AddModal showModal={showModal} setShowModal={setShowModal} />
模态
import React, { useState, useEffect } f
浏览 5提问于2020-08-16得票数 0
回答已采纳
1回答
如何防止基于子成分有效性的父母模态关闭？
reactjs、typescript、react-hooks、react-typescript
我有一个父组件，它有一个子Modal组件，它以一个子组件作为参数。这个子模态组件有一定的逻辑。如果子模式正在关闭，我希望能够检查子组件是否有效，并取消或不取消模态关闭。
const ParentComponent: FC<IProps> => {
const [showModal, setShowModal] = React.useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>open modal</but
浏览 1提问于2022-11-03得票数 0
1回答
如何在从子组件更新数据库时重新呈现父组件？
reactjs
我正在显示一个待办事项列表，每个待办事项都有一个编辑按钮，触发一个模式。从模式(子组件)中，您可以更新描述并将新的描述发送到数据库。
在父组件中有update和setUpdate钩子。我是通过两个道具发送，以便我可以更改更新值时，单击保存在模式相反。
当在子组件中使用setUpdate时，我期望父组件重新呈现并再次调用axios，这样，当我单击模态中的保存按钮时，todo列表将显示更新的todo。但不起作用。
如果在子组件中使用setUpdate更改update状态，则父组件为什么不重新呈现。
谢谢你的帮助。
显示待办事项的父组件
import axios from "axios
浏览 5提问于2022-01-13得票数 0
回答已采纳
1回答
我的三元运算符产生了与预期相反的效果
javascript、reactjs、gatsby、conditional-operator
我正在创建一个模式，以显示它是否是第一次加载页面。来存储我使用本地存储的信息。
在我的产品页面上，我为localStorage项'firstLoad‘创建了一个变量，如果找不到结果，它将默认返回true。然后，我将localStorage项'firstLoad‘设置为false。我已经记录了变量，这不会在相同的负载上改变它们(这是我想要的)，但在模态组件上，三元运算符具有相反的效果。
products.js：
let firstLoad = localStorage.getItem('firstLoad') || true
const [showModal
浏览 2提问于2020-01-13得票数 0
3回答
如何将UseState传递给另一个jsx组件？
reactjs
我正在开发一个react应用程序，我想将一个showModal useState传递给另一个组件，因为我的showModal有一个条件：
const [showModal, setShowModal] = useState(false);
return (
<>
{showModal ? (<div>Modal..</div>) : null}
</>
然后，在我想传递钩子的另一个组件上，如下所示：
... <button
type="button"
o
浏览 17提问于2022-06-16得票数 1
3回答
当我按下“反应”按钮时，如何使它只出现一个特定的模式？
javascript、reactjs
目前，我正在尝试制作反应中的模态，并希望形成一个网格，其中“按钮1”显示“模态1”，“按钮2”显示“模态2”等等。当我按下按钮显示一个模态时，它同时显示模态1和模态2。如何设置它，使按钮1只打开模态1？
这是我的App.js：
import React from 'react';
import './main.css';
import Modal from './components/Modal/modal';
class App extends React.Component {
state = {
show: false
}
浏览 2提问于2019-10-28得票数 1
回答已采纳
1回答
寻找更好的解决方案
reactjs
所以我有一个有12个按钮的网站。其中6个按钮需要启动一个带有不同视频的弹出窗口，6个按钮需要启动一个带有6个图像的弹出窗口。
现在，我正在试验一个显示图像的弹出窗口。这很容易，我设置了一个州
const [showModal, setShowModal] = useState(false);
然后我有一个按钮来设置显示onClick，然后显示一个模型-例如
<button className="buttonGeneral" onClick={()=>setShowModal(true)}>SUMMARY11</button> <ModalRe
浏览 1提问于2022-03-09得票数 0
1回答
React react-bootstrap -如何从外部组件关闭模式窗口
javascript、reactjs、modal-dialog、react-bootstrap
我使用的是版本： react@16.8.6
react-bootstrap@1.0.0-beta.8 我有一个简单的模态组件： import React, { Component } from 'react'
import { Modal } from "react-bootstrap";
import { ProgressBar } from "react-bootstrap";
class ProgressModal extends Component {
constructor(...args) {
super(...ar
浏览 14提问于2019-06-07得票数 0
回答已采纳
2回答
为什么我在react中得到"setShowModal未定义“错误消息？
javascript、reactjs、react-hooks
我的守则：
import React, { useState } from "react";
import Modal from "./Modal";
function showModal() {
setShowModal(true);
}
export default function NewPost() {
const [showModal, setShowModal] = useState(false);
if (showModal) {
return (
<h1>
<Modal />
</h1>
浏览 1提问于2021-05-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
