在React的TypeScript中打开和关闭对话框的状态
在React的TypeScript中，可以通过使用状态来控制对话框的打开和关闭。以下是一个示例代码：
首先，我们需要在组件的状态中添加一个布尔值来表示对话框的状态：
import React, { useState } from 'react';
const MyComponent: React.FC = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
// 其他组件代码...
return (
<div>
{/* 其他组件内容... */}
{isDialogOpen && (
<Dialog onClose={() => setIsDialogOpen(false)}>
{/* 对话框内容... */}
</Dialog>
)}
</div>
);
};
export default MyComponent;在上面的代码中，我们使用useState钩子来创建一个名为isDialogOpen的状态变量，并将其初始值设置为false。setIsDialogOpen函数用于更新该状态变量的值。
接下来，在组件的 JSX 中，我们使用条件渲染来决定是否渲染对话框组件。当isDialogOpen为true时，渲染<Dialog>组件，并通过onClose属性传递一个回调函数来处理关闭对话框的操作。
请注意，上述代码中的<Dialog>组件是一个示例，你可以根据实际需求替换为你自己的对话框组件。
这种方法可以在React的TypeScript中实现打开和关闭对话框的状态。
相关·内容
我使用了一个material -ui对话框。由于我能力不足，对话框不能重复打开和关闭。关闭对话框后，无法再次打开登录程序。我应该如何修复我的代码？我正在使用React和Redux。函数OpenPepsi在容器中。can是从Promise对象中获取的。 function MainPage(props: Material) {
return (
<React.Fragment>
<Link variant="h3" onClick={props.OpenPepsi}>
OpenPepsiDialog
浏览 21提问于2019-12-27得票数 1
我在React Material UI中使用useState inside对话框。 我使用useCallBack函数，如下所示。 const [count,setCount] = React.useState({
count: 0
})
const countCallback = useCallback(
() =>
setCount({
...count,
count : count.count + 1
}),[setCount,count]) 在ChildComponent中点击递增按钮执行此回调时，显示递增的数字。 但当我关闭对话框并
浏览 26提问于2020-01-01得票数 0
回答已采纳
我想通过使用TypeScript点击一个按钮来关闭对话框并作出反应。
我想做的事：
单击me按钮单击，isDialogOpen状态设置为true，如果isDialogOpen为true，则显示对话框。
如果单击“我”按钮或用户单击对话框之外的任何位置，则此对话框将关闭。
下面是我的代码：
function Parent() {
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
return (
<button onClick={() => setIsDialogOpen(!i
浏览 11提问于2020-08-13得票数 0
回答已采纳
1回答
我有一个如下所示的handleSubmit组件: File.tsx File.tsx
export default function SimpleDialog() {
const handleSubmit = (event: any) => {
<SimpleDialog />;
}
return(
<form>
<Button type="submit"> Save</Button>
</form>
)
}
我还有另一个名为SimpleDialog.tsx的文件
export default funct
浏览 2提问于2021-03-20得票数 0
2回答
我有一个容器，它嵌入了组件，除了容器作为props.IN发送的状态之外，我还创建了这样的组件状态。在容器中，我有类似这样的东西。我有类似这样的东西。
class UserTestContainer extends React.Component {
........
return (
<Container {...userSettings}>
<UserTest {...this.props} />
</Container>
)
class UserTest extends React.Component
浏览 3提问于2018-07-23得票数 0
假设我有两个组件，App和DialogBox；
所以我的react存储也有两个对象
const rootReducer = combineReducers({
app: appReducer,
dialog: dialogReducer
});
export const store = createStore(rootReducer);
现在，当我必须打开对话框时，我调用dialogBoxActions.openDialog()，当我关闭对话框时，我调用dialogBoxActions.closeDialog()和appActions.notifyDialogClosed()
浏览 0提问于2020-05-27得票数 0
我有以下对话框组件：
class LoginDialog extends React.Component {
state = {
open: false,
};
openDialog = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Dialog
o
浏览 1提问于2019-05-16得票数 2
回答已采纳
我在Material中创建了一个自定义对话框组件。
const CustomDialog = (props) => {
const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp);
return (
<>
<CssBaseline />
<Dialog
fullWidth
onClose={() => {}}
open={dialogOpenState}
maxW
浏览 7提问于2021-10-14得票数 3
回答已采纳
我尝试使用React 17创建一个小的错误跟踪应用程序。我有BugComponent，用户可以通过单击相关图标轻松设置优先级、状态、系统和其他一些属性，并从一个小的弹出对话框中选择值。这意味着我对每个bug有5-6个小的模式对话框，默认情况下我在页面上有20个bug。
在我当前的实现中，我有一个用于显示和更改优先级的组件，如下所示：
export const PrioritySelector = ({priority}) => {
const [open, setOpen] = useState(false);
const [prio, setPrio] = useSt
浏览 3提问于2021-03-05得票数 1
回答已采纳
如果用户单击第一个组件中的按钮，我希望打开对话框(另一个组件)。
我的组件是作为函数编写的。
第一个组件：
function Bookings(props) {
const [dialog, setDialog] = useState(false);
function openUserDialog() {
console.log("called")
setDialog(true)
}
return (
<div>
<
浏览 0提问于2019-03-04得票数 0
我使用的是react和typescript。
动画是使用帧运动完成的。当按下按钮时，菜单栏打开。帧运动动画是在menuItem中实现的，但menuItem不会移动。
我自己做的。
Refarence站点
浏览 3提问于2021-05-04得票数 1
我使用Visual Studio 2019和typescript让我的react项目工作得很好。在没有编码的一个月后，我打开了Visual Studio解决方案，我被警告要将typescript 3.4更新到3.5。现在，我突然在组件的this.state定义上有了一个构建错误。 link export default class Employee extends React.Component {
constructor(props) {
super(props)
this.state = {
user: null,
浏览 312提问于2019-08-28得票数 0
回答已采纳
1回答
我想使用资料用户界面的对话框。我使用另一个组件从右侧菜单(侧栏->用户注册)导航该对话框。我只想打开当前页面主页或关于我们的对话框。这是一个用户注册对话框。你能帮忙吗？
当我试图打开用户注册对话框时，我无法打开当前页面中的对话框，这就是为什么我已经为对话框组件创建了一个单独的组件。
当我选择边菜单选项时，我想打开这个对话框。对话框应在当前页中打开。
这是代码沙箱链接。
应用程序js
import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch
浏览 3提问于2020-03-09得票数 0
回答已采纳
例如，我的应用程序有activityA和activityB，activityC，activityA是主要活动：
我的应用程序具有文件导入功能，因此我可以将文件从SD卡导入我的应用程序，如果您
导入文件，将打开activityC，您可以在activityC中看到导入文件，配置
代码：
<activity android:name=".ActivityA">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
浏览 10提问于2013-05-30得票数 2
1回答
我有一个肚脐，使用HeadlessUI的Popover在手机上的汉堡包菜单。默认情况下，当您单击不在其中的元素/焦点时，此菜单将关闭。
现在，我正在尝试添加一个模式(HeadlessUI，Dialog)，在单击弹出菜单中的一个按钮时，我希望打开该模式。该模型在ModalButton组件定义(<><button><dialog></>)中使用。这是为了分离关注点(与模型相关的所有内容都在ModalButton中)。
问题是:当我在导航栏的弹出菜单并点击按钮打开对话框。浏览器关注这个新对话框，因此弹出窗口失去焦点，使其关闭。由于关闭，按钮(因此对话框
浏览 12提问于2021-12-30得票数 3
回答已采纳
我使用react + material-ui。我在jsx文件中创建了如下dialog组件：
export default class CartoviewAbout extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
_handleOpen() {
this.setState({open: true});
};
浏览 1提问于2017-01-04得票数 4
我有一个基于JavaScript的空闲注销脚本以及文件上传功能的页面。我注意到，如果我打开该对话框，然后允许空闲注销触发重定向到登录页面，则打开的文件对话框保持打开状态。我本以为它会在原始页面被卸载时关闭。
给定一个带有文件类型的输入：
<input type="file" name="file" />
如果用户单击并打开本机文件选取器对话框窗口，但在该窗口打开时，页或框架将通过脚本重定向，则对话框不会关闭。像这样的脚本应该复制该行为：
$('input[type=file]').on('click', functio
浏览 0提问于2020-11-18得票数 1
我一直试图在VisualStudio2022中建立一个ASP.NET Core + React (TypeScript) web应用程序项目，但没有成功。没有合适的栈/套间(？)在VisualStudio2022创建符合我需要的项目对话框(File > New > Project...)中。
然后，我尝试了说的话--而且效果很好--但是当我对React (即使用Standalone TypeScript React Template而不是Standalone JavaScript React Template)做同样的操作时，它就不能工作了，因为这个模板在其设置中没有Add int
浏览 8提问于2022-03-02得票数 6
我在我的react原生应用程序中使用这个库()来打开一个对话框。到目前为止，我遵循了他们的示例代码，它对我来说工作得很好：
import PopupDialog from 'react-native-popup-dialog';
<View style={styles.container}>
<Button
text="Show Dialog"
onPress={() => {
this.popupDialog.show();
}}
/>
<PopupDialog
re
浏览 5提问于2017-08-09得票数 0
回答已采纳
1回答
窗口安全对话框窗口弹出
、、、、
对bug的描述
我们正在Windows 10上开发。我们的后端是ASP.NET Core3.1MVC
Windows安全对话框窗口弹出，而我正在开发一个应用程序通过反应。真的很烦人。我们必须刷新页面。
首先，该图像显示：
然后，将上面的对话框窗口替换为下面的对话框窗口。它需要智能卡凭据：
应用程序的设置
package.json看起来是这样的：
"devDependencies": {
"@babel/cli": "7.14.3",
"@babel/core": "7.14.3",
浏览 7提问于2022-08-17得票数 4
1回答
我用的是React，TailwindCSS，和TailwindLabs的HeadlessUI。
我正在尝试使用无头UI对话框组件和转换组件来创建一个对话框，这样在桌面上的对话框如下所示：
就像这样在手机上：
但是，我发现在这个特定的场景中，对话框组件并没有卸载，即非常容易触发
用户在移动
用户打开对话框。
用户将文本框聚焦，移动键盘可见。
用户然后单击对话框后面的背景，取消对话框。用户正在执行此操作，而移动键盘仍处于活动状态。
对话框将从视图中删除和转换。尽管该组件不会卸载并阻止在下面的任何组件(按钮、文本输入等)上的任何交互。
视频演示：
我想要的实
浏览 17提问于2022-11-19得票数 0
回答已采纳
对于由React和TypeScript创建的如此小的组件。
interface Props {
}
interface State {
isOpen: boolean;
}
class App extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
isOpen: false
};
}
private someHandler() {
// I just want to turn
浏览 2提问于2017-08-07得票数 5
我在我的RN项目中使用了"react-native-popup-dialog“和"react-navigation”。我想在我的标题上添加一个搜索按钮。单击该按钮可打开包含要搜索的输入字段的对话框。
在"react-native-popup-dialog“中，我需要调用show()方法来显示popUpDialog，
this.popUpDialogForSearch.show();
在"react-navigation“中，我需要在静态区域中为我的按钮设置onPress方法，用于”react-navigation“的设计。
constructor(props)
浏览 4提问于2018-08-06得票数 0
3回答
我正在尝试使用React和Material制作一个Dialog组件。
现在，我的传统行为是Material对话框，类中有一个按钮可以打开这个对话框。但是对于这个组件，我想要的行为和Material对话框是一样的。
因此，我希望更改他的状态并重新呈现调用它的组件，如下所示：
var open = false;
<AuthDialog open={open} />
并使用外部按钮将打开的变量更改为true。
这是我的守则：
class AuthDialog extends React.Component {
constructor(props, context){
浏览 4提问于2017-06-21得票数 2
回答已采纳
使用Material UI React时，单击按钮将打开一个对话框，单击该对话框上的yes将打开父对话框上的另一个对话框。如何在打开子对话框之前关闭父对话框
浏览 1提问于2019-12-12得票数 0
2回答
我想知道是否有更好的方法来管理功能组件中对话框的打开和关闭？您可以找到以下示例： import React, { useState } from 'react';
import PropTypes from 'prop-types';
import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';
const ContactCard = ({ contact }) => {
const [editOpen, set
浏览 15提问于2019-12-11得票数 0
回答已采纳
2回答
React下拉菜单仅切换一次
、、、、
我正在尝试使用useRef钩子和Typescript构建React Dropdown组件:如果我单击切换按钮一次或单击它外部，它将正确打开和关闭，但当我想再次打开它时它将关闭。有什么想法吗？这是不是我不知何故失去了引用？ 用法如下： https://codesandbox.io/s/react-typescript-obdgs import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
interface Props {}
浏览 29提问于2020-04-15得票数 0
回答已采纳
我正在尝试使用TypeScript设置Next.js框架，我可以将pages/index.js页面更改为pages/index.tsx页面，但当我尝试将pages/_app.js更改为pages/_app.tsx时，项目会中断，并显示以下错误：
错误:环境:没有这样的文件或目录，请打开/../../pages/_app.js
为什么会发生这种情况？我已经安装了TypeScript、@types/react和@types/node
浏览 1提问于2020-10-28得票数 0
我正在学习React并使用文档中新实现的“钩子”。我在使用useEffect()函数的Modal (来自Material UI的对话框)和打开/关闭函数时遇到了问题。 我已经读过这两篇文章了：React.useState does not reload state from props和How to sync props to state using React hook : setState() 它已经帮助了我，我忘记了使用useEffect()函数，而只是从道具中设置useState。了解到useState将只执行一次来设置初始状态。但是我还有一个问题。 function AddItem
浏览 25提问于2019-05-28得票数 3
回答已采纳
4回答
我有一个应用程序，其中我有一个错误对话框弹出。如果我不触摸屏幕，让屏幕变暗，然后打开屏幕，弹出的对话框将不再存在。我希望即使在背光关闭后，对话框仍然在那里，就像在其他普通的android对话框中一样。
这就是我创建对话框的方式
Dialog lVoiceDialog=new AlertDialog.Builder(this).setIcon(
R.drawable.ic_dialog_alert).setMessage(mVoiceCallMessage)
.setPositiveButton(R.string.yes, clickListene
浏览 0提问于2011-11-09得票数 1
回答已采纳
1回答
好的，这是我想要达到的目标，也是我面临的问题。应采取的步骤如下：
打开对话框
拖动它和/或调整对话框的大小。
关闭对话框
再次打开对话框。
对话框从上次关闭的位置打开，大小是最后一次调整大小的位置。我不想让对话变成这样。我希望它能在每次打开时都从中心位置自动宽度。我提供了位置：‘中心’和宽度：‘自动’在对话框的开头，但它似乎没有帮助。
jQuery版本: 1.7.1 jQuery UI版本: 1.8.17浏览器: IE9/IE8
下面是HTML：
<div class='mydialog'></div>
<a href=&#
浏览 0提问于2012-08-17得票数 2
回答已采纳
2回答
我正在尝试显示一个基于从apollo钩子返回的数据的对话框，在那里我必须检查其中一个值是否与id匹配。 当单击checker===true时，我希望对话框在渲染时打开，当用户单击Close按钮时，对话框应该关闭。 const DialogComponent = () => {
const {data, loading, error} = useQuery(GET_QUERY_DATA)
const [isDialogOpen, setIsDialogOpen] = useState(false);
const checker = data &&am
浏览 22提问于2021-10-20得票数 0
假设您有一个<Button>和<Dialog>组件。在单击按钮时，对话框应该打开(open支柱)。通常情况下，您会将两个组件放在一起，使用react useState来控制状态：
export const FilterDialog() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<Button onCli
浏览 7提问于2022-11-11得票数 1
回答已采纳
2回答
当用户移动并关闭Stage时，我希望保留屏幕上Stage的最后位置。在Swing中，如果我保留一个窗口的相同实例，它将在移动、关闭和重新打开后显示在相同的位置。为什么在JavaFX中Stage总是显示在同一位置？
请查看下面的代码示例：
aboutStage = new Stage();
aboutStage.setTitle("About " + Constants.APP_TITLE);
aboutStage.setResizable(false);
aboutStage.initModality(Modality.APPLICATION_MODAL);
aboutStag
浏览 7提问于2013-01-06得票数 2
1回答
React重置所有字段中的表单
、、、、
我的react应用程序有问题。首先，当我在我的姓氏中输入一些东西，然后我打开“地址对话框”并在其中输入一些东西时，它是ok的。但问题是，如果我已经输入了姓氏，然后我打开“地址对话框”，输入“地址”并提交它，它会重置姓氏的值。我相信这是因为enableReinitialize，但如果我不这样做，那么我如何将Address的值从“地址对话框”传递到“表单”Address 请在这里查看我的codesandbox CLICK HERE
浏览 28提问于2020-09-30得票数 1
我使用的是模态对话框，问题是当我关闭其中一个对话框时，如果我已经打开了3个对话框，使用‘hidden.bs.mode’，就会触发我在DOM上拥有的所有模态对话框元素。我只想抓住对话框关闭。你知道这有可能吗？
$(element).on('hidden.bs.modal', function () {
// do something…
})
浏览 1提问于2015-08-18得票数 0
回答已采纳
如果在浏览器中打开了Primefaces对话框，有没有办法从支持bean中区分出来？
下面是我在facelet上显示对话框的方式：
<p:menuitem value="Click me" oncomplete="dialogWidget.show();" />
当我从ViewRoot中查找对话框对象时，dialog.isVisible()和dialog.isInView()都返回true，即使对话框没有显示。或者，是否有一个标志来告诉我主窗口是否灰显(当显示一个模式对话框时会出现这种情况)？
背景资料:我正在找出在哪里展示我的FacesMessag
浏览 1提问于2013-03-01得票数 7
回答已采纳
我在一个项目中使用react-16，该项目使用create-react-app和提供样式(无组件)的vanilla bootstrap 4库创建。
有没有人能给我指个例子，在这个例子里，按下一个按钮，我就可以打开一个带有bootstrap风格的模式对话框？
提前谢谢。
浏览 51提问于2018-06-03得票数 3
下面是CodeSandbox：
我实现了一个带有React上下文的模型，公开了1)开放状态，2)模态配置，3)一个开放和关闭的方法。
// ...
const onOpenDialog = (mode, config) => {
setDialogMode(mode)
if (config) {
setDialogConfig(config);
}
}
const onCloseDialog = () => {
setDialogMode("");
if (Object.keys(dialogConfig).length > 0
浏览 0提问于2021-10-12得票数 0
回答已采纳
2回答
我有动态创建对话框的功能。有时我需要模式或确认对话框
所以我创建了一个功能
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(
浏览 0提问于2012-01-14得票数 2
回答已采纳
想象一下，有一个模式/对话框正在打开。在这种模式下，有一个保存按钮，它分发一个由redux-saga获取的updateUser操作。然后由redux-saga接听网络电话。如果此网络调用成功，则模式应自动关闭。什么是最理想的方法来做这件事的剩余-传奇？
在redux thunk中，我们会分派动作(诺言)，然后在组件中，当网络调用成功时，我们可以链接一个处理模式关闭的‘we’。所以我和一位同事都在想，怎样才是最好的方法来做这件事呢？
浏览 2提问于2017-11-25得票数 4
1回答
填写表格未完成时提示符
、、、、
我需要一个提示符，如“您确定要离开吗?您有未保存的更改”。因为如果我不小心关闭了对话框，当我再次打开它时，它会让我再次填写表单。
如果决定用文本字段中已经输入的文本关闭Modal对话框，则此提示符将防止其关闭；如果决定重定向到不同的页面，则将防止Modal对话框也关闭。提示符有一个“取消”和“确定”按钮。就像下面的照片。
我不想使用<Prompt/>的反应路由器.还有别的办法吗？
<Form>
<PromptIfDirty />
<TextField
autoFocus
id="name"
浏览 5提问于2022-07-10得票数 0
我的问题很简单。我在我的应用程序中使用HeadlessUI的对话框组件来实现React，当我在模式之外点击时，我希望它不会关闭。在文档中，有一个对话框。处理此交互的Overlay参数，但没有禁用它的设置。 有什么解决方案吗？这是我正在使用的组件的HeadlessUI文档的链接：https://headlessui.dev/react/dialog 也许你知道React的“警报阻止模式”？？
浏览 79提问于2021-10-11得票数 2
我正在使用React Typescript，并希望弹出一个用户输入对话框，允许用户在将值反馈给按钮当前正在执行的函数之前输入一个值。
这是一个如此简单的用例，我不敢相信我在任何地方都找不到任何如何做到这一点的模块或示例。有很多用于React JS的对话框npm模块，但我找不到一个可以处理Typescript的模块。
有没有人做过类似的事情，并且可以建议如何在ReactTS中做到这一点？
浏览 3提问于2018-06-21得票数 1
2回答
在我的MainActivity中，如果设置了意图中的标志，就会打开一个对话框。如果创建了对话框，则在onPause()中取消该对话框。
@Override
public void onPause() {
super.onPause();
if (_dialog!= null) {
_dialog.dismiss();
_dialog= null;
}
}
@Override
protected void onNewIntent(Intent intent) {
super.onNewIntent(intent);
if
浏览 2提问于2017-08-08得票数 14
回答已采纳
1回答
发生意外错误：“无法在. node_modules\react-native-bouncy-checkbox\node_modules".中找到要链接的react本机-矢量-图标的副本。
已安装的本机矢量图标
嗨，我是在安装时得到的开发人员。
yarn add react-native-bouncy-checkbox
TLDR
PS D:\Ctrl + O\Codingboyo\AppDevelopment\ReactNative\LearningProjects\UberEats\ubereats>纱线添加反应-本机-弹跳-复选框
纱加v1.22.17
1/4解析包裹..
浏览 9提问于2021-11-22得票数 0
我在一个.Net核心网络应用程序上打开了ReSharper终极版，该应用程序使用TypeScript编写响应组件的代码。
所以我有一个简单的组件类；
export class Index extends React.Component<{},{}>{
Resharper警告我
Generic type '_$_$RsRpExt"FromFile;....\node_modules\@types\react\index.d.ts, module=JavaScriptReferencedFilesModule:Referenced external files"
浏览 5提问于2017-08-11得票数 12
回答已采纳
1回答
我正在尝试角2和关闭的kendo用户界面，单击事件似乎可以在kendo对话框上工作。但是，是否存在打开和关闭对话框的方法，或者是否必须为此使用javascript？
浏览 0提问于2016-11-02得票数 2
回答已采纳
1回答
我在我的应用程序中使用了react和flux，在我的应用程序中有两个组件: TreeView和TableView，它们是从两个不同的存储中获取的。
我想添加一个选项-当我单击TableView中的一行时，它将在我的TreeView中打开相关节点。
我的问题是:这两个组件应该如何相互通信？在AngularJS/Backbone中，我将使用一个事件聚合器模式，并用它的id广播一个类似于- "objectSelected“的事件。
我应该如何在react with flux架构中做到这一点-我想使用flux的方式-并创建一个动作，但我的存储将保存UI状态(哪些节点是打开的)，我认为组件(在本
浏览 0提问于2015-05-06得票数 3
1回答
我正在使用@material ui和react。我有以下问题：
使用键盘，打开上下文菜单，选择“”或"Requester“。
关闭对话框。当您再次标签，焦点现在回到页面的顶部，它应该停留在菜单上。我怎样才能达到这种行为呢？
浏览 1提问于2022-03-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
