在React中单击按钮以呈现弹出窗口？
在React中，要实现单击按钮以呈现弹出窗口，可以按照以下步骤进行：
- 首先，需要在React组件中定义一个状态变量来控制弹出窗口的显示与隐藏。可以使用useState钩子函数来创建一个名为isModalOpen的状态变量，并将其初始值设置为false。
import React, { useState } from 'react';
function MyComponent() {
const [isModalOpen, setIsModalOpen] = useState(false);
// ...
}- 接下来，在按钮的点击事件处理函数中，将isModalOpen状态变量设置为true，以显示弹出窗口。可以使用onClick属性来绑定按钮的点击事件处理函数。
function MyComponent() {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleButtonClick = () => {
setIsModalOpen(true);
};
return (
<div>
<button onClick={handleButtonClick}>点击我</button>
{isModalOpen && <ModalComponent />}
</div>
);
}- 在ModalComponent组件中，可以编写弹出窗口的内容和样式。可以根据具体需求自定义弹出窗口的外观和交互逻辑。
function ModalComponent() {
const closeModal = () => {
setIsModalOpen(false);
};
return (
<div className="modal">
<div className="modal-content">
<h2>弹出窗口标题</h2>
<p>弹出窗口内容</p>
<button onClick={closeModal}>关闭</button>
</div>
</div>
);
}以上是在React中实现单击按钮以呈现弹出窗口的基本步骤。根据具体需求，可以进一步优化和扩展弹出窗口的功能和样式。
相关·内容
1回答
如何将删除功能传递给模态组件？
reactjs
目标:将removeStory函数和位置放在一个模态组件中。因此，用户看到一个故事，想要删除它。当用户按下“删除”按钮时，会弹出一个模式来确认决定。我管理了最后几个小时来创建模态状态和组件，但是有一个问题。我不明白如何让removeStory函数在我的模态组件中工作。我让它可以删除Stories.js中的一个帖子，但不能让它在模态组件中删除相应的帖子。见图像
我尝试过的是:我通过自定义全局挂钩将函数传递给我的Modal组件。在调用removeStory函数参数时，需要将id作为参数传递。我只是需要一些指导，如何做，因为我已经接近。
为了您的方便，我剥离了组件，省略了reducer.js。
Ap
浏览 6提问于2021-12-29得票数 0
回答已采纳
1回答
从站点复制/粘贴Reactjs-弹出示例不适用于useState。
javascript、reactjs、react-hooks、reactjs-popup
我正在上试用Reactjs弹出的示例代码，但它似乎不起作用。我差不多是复制/粘贴了密码。我遗漏了什么？如果删除对"useState“的所有引用，则可以使弹出窗口工作。
index.js
import ReactDOM from 'react-dom/client';
import './index.css';
import ControlledPopup from './ControlledPopup';
const test=ReactDOM.createRoot(document.getElementById('popup&
浏览 4提问于2022-11-14得票数 1
回答已采纳
1回答
模态窗口从未激活
javascript、reactjs、dialog、modal-dialog、user-input
我正在使用javascript (我是新手)。在我的主页上，我想点击一个按钮打开一个对话框窗口，允许用户输入一些值。
我发现了模态窗口，所以我试着在分析一些例子之后生成一个，但是现在，什么都没有发生.
我试过这个代码：
我的主页，Environment.js：
import React, { Component } from 'react'
import { ReactLoader } from 'Loader'
import Modal from './Modal';
class EnvironmentExtension extends Mo
浏览 1提问于2018-03-07得票数 0
1回答
如何使react Modal的背景成为实体
javascript、reactjs、react-modal
我刚刚通过点击按钮将react-Modal中的Modal添加到页面，我面临的问题是，当我单击该按钮使模式弹出时，它确实会弹出，但模式覆盖的页面内容会渗出，所以modal看起来是这样的。
桌子等不应该在那里，只有一个空白的白屏。有谁能帮帮我吗？
下面是我单击以显示模式的第一个类。
const [showModal, setShowModal] = useState(false)
<button onClick={() => { setShowModal(true) }} className="paddingNextButton float-right viewButto
浏览 13提问于2021-05-22得票数 0
2回答
如何在React中创建动态模型？
javascript、reactjs
当我点击一张卡片时，我想打开一个模式，这个模式包含了关于被点击的卡片内容的更多信息。 在我的例子中，卡片被按钮所取代。 那么，如何根据所单击的按钮更改模式内容呢？ 我看到了这个帖子：Change react-modal data dynamically。但我不明白他的解决方案。 App.js： function App() {
const [modal, setModal] = useState({ show: false, data: null });
const openNoWebsite = () => {
setModal({ show: tr
浏览 52提问于2021-08-04得票数 0
3回答
如何防止双重提交
reactjs
我有当前的代码，用户使用按钮(OpenModal.jsx)打开一个模型，可以在数据库中保存数据，我遇到的问题是，如果用户足够快地单击submit两次，然后在模式关闭之前，他可以两次保存相同的数据(发送双提交)。
防止这种情况的最好方法是什么？
OpenModal.jsx
const OpenModal = () => {
const [openModal, setOpenModal] = useState(false);
return (
<div className="container">
<b
浏览 14提问于2022-07-12得票数 0
回答已采纳
2回答
带有React和Redux的模式窗口
reactjs、redux、react-redux
我用React和Redux做了一个模态窗口。我想避免本地状态，所以我使用Redux来保存模式是否打开的信息。 Modal.js import React from 'react';
import './Modal.css';
import {useSelector, useDispatch} from 'react-redux';
import { isModalOpen } from '../actions/index';
const Modal = (props) => {
const dispatch =
浏览 20提问于2021-09-20得票数 0
1回答
当onScroll位于div底部，然后禁用按钮
reactjs、onscroll
尝试实现类似于流行的T&C操作，当你向下滚动到div 'accept‘按钮的最底部时，你就可以点击它了。
在这个例子中，我使用的是material组件&当我在组件中添加“禁用”时，按钮就被禁用了，仅此而已。
下面是代码：
import React from 'react';
import PropTypes from 'prop-types';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/But
浏览 1提问于2020-04-02得票数 1
回答已采纳
1回答
显示模态中的最后一个用户
reactjs、typescript
我需要你帮忙处理这段代码。它是一个在屏幕上显示用户的网站，右边的按钮应该以模式打开用户信息的详细信息。我无法获得用户的信息，我点击，以显示在模式。给我看最后一个。
网络照片
，这是我的代码
import { Modal } from "antd";
import 'antd/dist/antd.css';
import { useEffect, useState } from "react"
import { userApi } from "../api/userApi";
import { Usuario } from &#
浏览 8提问于2022-09-13得票数 -1
1回答
当使用React和jest将状态挂钩传递给子组件时，如何测试副作用？
reactjs、jestjs
我想测试一个子组件，但是它依赖于父组件的状态(钩子)。
子节点接收isModalOpen和setIsModalOpen作为属性。每次isModalOpen发生变化时，Child内部的useEffect都会触发。但是，当我试图单独测试Child组件时，我无法强制状态更改触发useEffect挂钩。我如何实现这一点而不必在测试环境中呈现Parent？
在下面的示例中，我可以通过呈现Parent来通过测试。我只想渲染Child，并且仍然通过测试。
function Child({ isModalOpen, setIsModalOpen }) {
useEffect(() => {
浏览 0提问于2021-04-19得票数 1
回答已采纳
1回答
onClick事件打开所有Material-UI对话框
javascript、reactjs、material-ui
我正在尝试做一个简单的员工"rolodex“，并希望它显示员工信息时，他们点击卡片通过Material-UI对话框模态。当我点击任何一个时，所有的对话框都会打开，而不只是我想要的那个。下面是我得到的信息： const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
}
const closeModal = () => {
setIsModalOpen(false);
}
<Grid continer>
浏览 12提问于2020-08-21得票数 0
回答已采纳
1回答
React onClick元素:调用另一个类元素
javascript、reactjs
我正在尝试实现一个模式弹出窗口(存储在postview类中)，当在postcontainer类的任何帖子中调用onclick时，它都会出现。我是一个新的反应，所以我希望您的建议，以改善代码。
类1 (PostCointainer)这是主类，它显示一个数组中的多个post。我希望当任何帖子被点击时，模式从类2出现
import React, { Component, useState } from 'react';
import '../App.css';
import PostView from './PostView';
function Re
浏览 0提问于2020-06-02得票数 0
2回答
无法使用React/Typescript中的弹出模式更新单个搜索框
reactjs、typescript
我们在React/Typescript中有一个应用程序，可以动态生成行。每一行都有一个搜索框，在该搜索框中，有一个添加弹出窗口的按钮。在弹出窗口中，有一个文本字段，填充后，必须将其值传递给从中打开弹出窗口搜索框。 {idx == 0 && <div className="bold">Organization Contact Name</div>}
<div className="buttonIn">
<Searchbox searchTitle={this.state.contactNa
浏览 21提问于2021-01-03得票数 0
回答已采纳
1回答
无法读取未定义的属性(读取“查找”)
reactjs、redux、react-redux、react-hooks
我在用残渣做个破烂。应用程序有一个带有用户名的表单，然后是一个创建、查看、编辑和删除帖子的屏幕，我正在编辑部分。但是，当我使用array.find()遍历数组并查找每个帖子时，我将得到以下错误：
无法读取未定义的属性(读取“查找”)
我会把密码留在下面。
EditScreen:
import React, {useState} from 'react';
import '../_assets/modal.css';
import { useDispatch, useSelector } from 'react-redux';
import {
浏览 2提问于2021-11-08得票数 2
回答已采纳
1回答
如何从Reactjs中的子组件更改父组件的状态？
reactjs
我正在学习Reactjs，并开始沿着这条路线构建简单的项目。因此，我有两个组件:父组件和子组件，我将称之为组件A和B。组件A(父组件)中有一个按钮将使组件B(子组件)弹出，并使组件A在透明背景下不可点击(0.3)。
在组件B中，我编写了一段代码，一旦单击botton，就会删除该组件。这个按钮就在组件B中。所以，现在的问题是，一旦我点击这个按钮来删除弹出窗口，组件A将保持不点击，透明背景为0.3。既然组件B是组件A的子组件，那么如何从组件B更改组件A的状态？这有可能吗?还是我需要完全重写代码？
谢谢你帮我。
构成部分A代码：
import React, { useEffect, useState
浏览 2提问于2021-06-30得票数 1
回答已采纳
1回答
使用按钮过滤阵列地图在反应？
reactjs、arrays、react-hooks、mapping、state
我正在一个投资组合网站上工作，我想有2个按钮，一个用于“打印”和一个用于“数字”。
在react中，我在一个名为"ProjectsList“的对象文件数组中设置了我的所有项目。
当我单击一个按钮时，它会过滤数组映射中的项目，并且只显示具有相同“类别”值的项。
目前，我只能获得它，所以当我单击按钮时，它会将它们全部返回为"true“，但如果对象项的实际状态与我单击的按钮的id不匹配，则无法将其更改为false。
index.jsx文件：
import React, { useState } from "react"
import Seo from "../
浏览 9提问于2022-07-30得票数 0
1回答
模态未显示Reactjs使用钩子
javascript、reactjs
我正在使用react和创建并显示模式。这是我的密码
Modal.tsx
const modalRoot = document.getElementById('modal');
const Modal: React.FC<Props> = memo(({isOpen, toggle, children}) => {
const el = document.createElement('div');
useEffect(() => {
modalRoot.appendChild(el);
r
浏览 3提问于2019-12-26得票数 1
回答已采纳
1回答
setState钩子不会更改从子对象调用的状态
reactjs、react-hooks、use-state
我在组件中使用钩子来管理模态状态。(组件的类版本会重现该问题) handleClick将打开模式，而handleModalClose应该关闭。 我向Modal组件发送handleModalClose，使用console.log可以看到它已被处理，但isModalOpen状态没有改变(回调setState也是如此)。当我试图用setTimeout调用它时-状态发生了变化，Modal正在关闭。 为什么地狱的状态没有改变，当我调用的变化从孩子？ const [isModalOpen, setModalOpen] = useState(false);
const handleClick =
浏览 23提问于2020-04-02得票数 0
1回答
模式打开时如何将溢出样式更改为隐藏
css、reactjs、styles、styled-components
我正在尝试创建react应用程序，当按下按钮时，我希望溢出到隐藏，我想在模态上显示联系人表单，但是溢出正在运行，我可以滚动的所有东西，即使是模式是打开的。
这是我带按钮的肚脐
import React from "react";
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";
import "./N
浏览 3提问于2022-06-24得票数 0
3回答
如何使“反应模态元素内的函数工作”？
reactjs、react-hooks、jsx、use-state、react-modal
我是一个初学者反应，我一直在设计一个简单的电子商务网页，我正面临这个问题。我已经创建了两个函数，openModal和closeModal，它们改变了我创建的Modal框的状态。当我在Modal标记中使用closeModal函数时，它会关闭，但是如果它被内部按钮元素关闭，它就不会关闭。我找不到任何答案，有人能告诉我我在哪里犯了错误吗？
import './Cards.css'
import Modal from 'react-modal'
import { useState } from 'react';
import './Cards.c
浏览 1提问于2021-10-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
