React解决select和DatePicker、RangePicker不跟随页面滚动的问题

最新推荐文章于 2023-01-11 11:01:58 发布

·小新

最新推荐文章于 2023-01-11 11:01:58 发布

阅读量545

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/q1054007919/article/details/122477055

版权

/*RangePicker组件中的用法  */ 
<RangePicker getPopupContainer={triggerNode => triggerNode.parentNode}/>

/*Select组件中的用法*/ 
<Select placeholder="数据格式" getPopupContainer={triggerNode => triggerNode.parentNode}>

}

在DatePicker组件中，使其固定在父元素上：

getCalendarContainer={triggerNode => triggerNode.parentNode

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

·小新

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

el-date-picker优先级&固定在输入框下不会随页面滚动而固定在屏幕中

weixin_67490604的博客

12-08

852

el-date-picker优先级&固定在输入框下不会随页面滚动而固定在屏幕中

react-horizontal-strip-datepicker:水平日期选择器（React功能组件）

05-01

该项目是通过引导的。可用脚本在项目目录中，可以运行： React水平条日期选择器稳定的水平日期选择器，可以滚动浏览网页安装运行yarn add react-horizontal-strip-datepicker 用法进口： import ReactHorizontalDatePicker from "react-horizontal-strip-datepicker"; 并用作： < ReactHorizontalDatePicker xss=removed xss=removed xss=removed xss=removed> 可用的道具有 Struts 类型默认描述 enableScroll 布尔型错误的将列表设置为可滚动 se

参与评论您还未登录，请先登录后发表或查看评论

解决Antd的RangePicker组件在整体页面出现滚动条时，不随弹出框滚动的bug

weixin_38008461的博客

09-07

1333

之前在antd官网和通过网络检索发现好多文章都是写的用getPopupContainer这个API，但是我在RangePicker组件上试了好几种写法都不生效，最后发现getCalendarContainer这个API才是有效的，问题解决了~ 解决办法：在RangePicker组件内加上这句代码就好了： getCalendarContainer={trigger => trigger.parentNode} ...

react-native-swipetimepicker:一个简单的滑动时间选择器组件，用于响应本机

05-09

react-native-swipetimepicker 一个简单的滑动时间选择器组件。允许完全自定义。安装 React本机> = 0.49 yarn add react-native-swipetimepicker 属性 Struts 描述默认 string backgroundColor 指定组件的背景色 #828186 string borderColor 指定组件的边框颜色 undefined number borderWidth 指定组件的边框宽度 undefined number borderRadius 指定组件的边界半径 3 string textColor 呈现字符串时使用的文本颜色 #ffffff number fontSize 文字的字体大小 auto string fontFamily 文字的字体系列 undefined obj

react-该react组件用于数字滚动插件特别适用用于金额的滚动效果

08-15

该react组件用于数字滚动插件，特别适用用于金额的滚动效果

react-daterange-picker:React 应用的日期范围选择器

08-04

通过添加import DateRangePicker from '@wojtekmaj/react-daterange-picker'来import DateRangePicker from '@wojtekmaj/react-daterange-picker' 。通过添加<DateRangePicker> 。使用onChange道具获取新值。 ...

react-bootstrap-daterangepicker:用于React的日期时间选择器（使用引导程序）。这是一个围绕 bootstrap-daterangepicker 项目的React包装器

07-24

react-bootstrap-daterangepicker 描述用于React的日期/时间选择器（使用引导程序）。这是一个围绕现有 jQuery/bootstrap 库的React包装器（它不是一个纯粹的React端口）：入门安装所需的对等依赖项： npm ...

react-native-wheel-picker-android ★186 - 简单灵活的 React 原生轮选择器，适用于 Android，包括 DatePicker 和 TimePicker。

06-08

React Native Wheel Picker V2 一个简单的Android 轮选择器（对于IO 使用来自react-native 的Picker）示例您可以克隆repo 并从./example 文件夹运行示例安装 yarn add react-native-wheel-picker-android 自动安装...

react-daterange-picker:使用@ material-ui的React日期范围选择器。现场演示

05-06

React日期范围选择器 ...import { DateRangePicker , DateRange } from "@matharumanpreet00/react-daterange-picker" ; type Props = { } type State = { open : boolean , dateRange : DateRange } class App ex

react-datetimerange-picker:React 应用程序的日期时间范围选择器

08-04

React-DateTimeRange-Picker React 应用程序的日期时间范围选择器。选择几天、几个月、几年甚至几十年几乎支持任何语言不需要moment.js tl;博士通过执行npm install @wojtekmaj/react-datetimerange-picker ...

react select默认选项_reactjs – 如何为Picker提供默认的“Please select …”选项？

weixin_42519985的博客

02-11

355

我想让我的Picker在启动时显示“默认选项”.这意味着：像“请选择一个选项”之类的东西.我试图用这个短语手动添加一个选项,但是,这样在选择其他选项后可以重新选择“默认选项”,就像它是真正的选项之一.有一些方法可以做到这一点？selectedValue={this.state.initialOption}onValueChange={this.handleChangeOption}prompt='...

react月份选择控件_[React] 基于react 拖拽时间选择器

weixin_39946534的博客

12-19

223

上图：yarn install or npm installyarn start or npm start使用方法：yarn add@congbao/time-period-selector 或者 npm install@congbao/time-period-selectorimport TimePeriodSelector from '@congbao/time-period-select...

【React】select和DatePicker组件不跟随页面滚动

最新发布

qq_43064422的博客

01-11

909

React中解决antd的select和DatePicker组件不跟随页面滚动的问题

react 图表库滚动_10个有趣的javascript和css库（2019年5月最新）

weixin_39573981的博客

12-26

使用react实现一款移动端日期选择器

brokenkay的博客

08-21

5164

需求: 开发一款能够选择年份和月份的移动端选择器,其中可选择的最大日期不能超过当前的时间. 最终结果: 具体实现: 1.创建一个文件夹DateSel作为日期组件的目录,在里面分别创建两个文件 index.js和style.scs...

React非表单内的组件手动清空Input输入框跟RangePicker日期范围

Alanrnzearn的博客

10-12

2058

效果展示情况说明在项目开发的时候，因为显示效果需要使用通过重置按钮来清空控制的输入框与时间日期选中的值。因为是属于非表单，所以无法通过表单的属性来操作Input输入框跟RangePicker日期范围选择。所以重置清空值，则需要要求输入的值跟 ...

我们一起踩过的坑----react（antd）（一）

12-18

343

1.this问题对应写法1)this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数handleChange(e) { this.setState({temperature: e.target.value});}2)handleChange=(e)=> { this.setState({tem...

我们一起踩过的坑----react（antd）

hahahhahahahha123456的博客

12-26

3332

1.this问题对应写法 1) this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数 handleChange(e) { this.setState({temperature: e.target.value}); } 2) handleChange=(e)=> { this.setStat...

antd4.x必踩的坑（二）

baidu_41601048的博客

05-01

1994

1 antd的select和popover弹层当页面内容过高时滚动悬浮固定在页面某个位置如图。解决办法：给select添加如下属性： getPopupContainer={(triggerNode)=>triggerNode.parentNode} <Space size="large"> <span>定额应用管理</span> <Select defaultValue=...

React解决安卓输入框键盘遮挡与滚动问题

在React开发过程中，尤其是在Android环境中，遇到一个常见的问题是输入框在软键盘弹出时会被遮挡，并且导致页面滚动受限。本文将详细介绍如何解决React应用中这种常见的问题。 React起源于Facebook，作为一个用于...