如何将滚动添加到react-bootstrap Modal.Body中
在React中使用react-bootstrap库创建模态框（Modal）时，可以通过以下步骤将滚动添加到Modal.Body中：
- 首先，确保已经安装了react-bootstrap库。可以使用以下命令进行安装：
npm install react-bootstrap- 在需要使用模态框的组件文件中，导入所需的模块：
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';- 创建一个状态变量来控制模态框的显示与隐藏：
const [showModal, setShowModal] = useState(false);- 在组件中添加一个按钮或其他触发模态框显示的元素，并在点击事件中设置状态变量为true：
<Button onClick={() => setShowModal(true)}>打开模态框</Button>- 在组件的render方法中，使用Modal组件来创建模态框，并将状态变量传递给show属性来控制显示与隐藏：
<Modal show={showModal} onHide={() => setShowModal(false)}>
<Modal.Header closeButton>
<Modal.Title>模态框标题</Modal.Title>
</Modal.Header>
<Modal.Body>
{/* 这里可以添加滚动内容 */}
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setShowModal(false)}>关闭</Button>
</Modal.Footer>
</Modal>- 在Modal.Body组件中，可以添加滚动内容。可以使用普通的HTML元素，也可以使用react-bootstrap提供的组件。
<Modal.Body>
<div style={{ maxHeight: '300px', overflowY: 'auto' }}>
{/* 添加滚动内容 */}
</div>
</Modal.Body>在上述代码中，我们使用了一个div元素来包裹滚动内容，并设置了最大高度和垂直滚动条样式。你可以根据实际需求进行调整。
这样，当点击打开模态框的按钮时，模态框将显示出来，并且Modal.Body中的内容将可以滚动。
相关·内容
我怎么才能只滚动正文而不滚动整个页面呢？Modal.Dialog> <Modal.Title>Modal title</Modal.Title> <Button>Close</Butt
浏览 4提问于2018-02-20得票数 13
回答已采纳
1回答
目前，我所做的是从数据库中查询并提取所有问题。然后，我用$amounts创建了一个表，可以单击表中的每个单元格来显示问题。当您单击表格中的单元格/问题时，会打开一个模式。from "react-bootstrap/Button";import Row from "react-bootstrap/Row";
import Col from &q
浏览 0提问于2020-02-06得票数 0
我试图在特定的div中创建模式弹出窗口，但它在底部创建了body import { Modal } from 'react-bootstrap'; <Modal.Title>Modal heading</Modal.Title> <Modal.B
浏览 34提问于2019-06-17得票数 0
1回答
onClick模式使整个页面消失
、、、、
这就是我以前的代码是如何工作的:当我单击表中的单元格时，它会弹出问题模式。然后，当我单击问题模式的submit时，问题模式将消失，反馈模式将弹出。from "react-bootstrap/Button";import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/C
浏览 12提问于2020-02-10得票数 0
1回答
： import React, { useEffect, useState } from "react";import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
浏览 12提问于2021-03-22得票数 0
回答已采纳
1回答
我无法从Modal生成一个react-bootstrap来在屏幕上呈现。DOM节点被添加到DOM树中，但它不想在屏幕上显示。<Modal.Title>Modal heading</Modal.Title> <Modal.Body>
<h4>{this.props.state.id}</h4>
浏览 2提问于2017-12-26得票数 1
回答已采纳
1回答
发生了什么import "., Form, NavDropdown
import Modal from 'react-bootstrapI'm anothe
浏览 1提问于2020-10-12得票数 0
回答已采纳
我使用道具从子组件中调用父方法，并得到以下错误：
我将道具传递给AddGuest子组件的方式如下所示： import globalServiceNew Meeting <label>Create</label> <Modal.Bodyvariant="p
浏览 4提问于2020-01-07得票数 8
回答已采纳
我的React应用程序有一个react-bootstrap引导模式，它包含Modal.Body中的Formik表单和Modal.Footer中的submit按钮。我们如何允许Modal.Footer中按钮的formik.isValid属性接受formik.isValid和formik.dirty值？更完整的代码
import { Button, Mod
浏览 2提问于2021-02-10得票数 0
2回答
我有一个背景图像，我想在一个div中添加链接，这些链接目前是不可点击的，我不知道我在哪里出错。import '../..import React, {Fragment, useReducer, useState} from 'react'; <div className="ful
浏览 2提问于2022-02-23得票数 1
回答已采纳
1回答
无法使用d3和react
、、、
首先，我尝试将d3圆直接显示在(非模态) div元素中。我试过如下：现在，我尝试将d3循环添加到使用react引导创建的模态弹出中，如下所示：import ReactDOM from "react-dom";import Button from "reac
浏览 3提问于2022-09-12得票数 0
3回答
我正在使用react bootstrap Modal ，现在我有了modal，我想为提供的编辑功能在不同的组件中显示该模式。我怎么能把这个存档import {Modal} from 'react-bootstrapModal.Header closeButton>
浏览 12提问于2022-04-08得票数 0
回答已采纳
2回答
Too many re-renders error
父组件和子组件的代码如下：import React from 'react'import { Modal, Button } from 'react-bootstrap'
const [show<Modal.Title>Moda
浏览 9提问于2020-09-12得票数 1
回答已采纳
1回答
我正在尝试放置一个模式，当用户点击名字列表中的东西时，它会弹出，并有更多关于该项目的信息。import Modal from "react-bootstrap/Modal";importModalHeader from "react-bootstrap/ModalHeader";
import ".symptoms
浏览 7提问于2019-11-20得票数 0
我正在尝试为弹出窗口中出现的按钮单击事件复制文本，但该文本未被复制。我试着使用这个代码，它在常规窗口上工作得很好，但在弹出窗口中就不行了。代码如下： var textField = document.createElement('textarea'); document.body.appendChild(textField);
te
浏览 24提问于2020-06-02得票数 1
我的目标是在多个组件中重用bootstrap中的模态。我有一个问题，如何将组件传递给容器？下面是一个简单的容器：var React = require('react')
<Modal.Title>{this.props.title}</Modal.Titl
浏览 12提问于2016-12-25得票数 2
回答已采纳
2回答
我想让输入框在呈现后立即放在我的子组件中，因此我试图将输入框的ref向上传递给它的父组件，父组件有一个模式。我试着把重点放在输入进入模式上。(使用react-bootstrap模式的onEntered属性)父组件的JSX： show={props.isLoginModalOpen} &l
浏览 2提问于2020-05-19得票数 0
我在一个Formik Form中包装一个React可滚动的Form，以便让Modal.Footer中的按钮提交表单。但是，当我将Modal.Body和Modal.Footer包装在Form元素中时，它会阻止内容可滚动。知道如何将模态包装成一种形式并保留样式吗？closeButton> </Moda
浏览 0提问于2019-09-02得票数 1
回答已采纳
查看react引导站点，我有以下内容(直接从该站点获取)import Button from 'react-bootstrap/Button';import render from 'react-dom';
function ExampleModal.Header closeButton>
浏览 1提问于2022-03-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
