当焦点位于输入字段时,为什么 React 中的日期选择器会闪烁?

2024-04-23

有人可以告诉我为什么当焦点位于输入字段时,React 中的 datepicker 会闪烁吗?

我在我的演示中使用这个日期选择器

https://www.npmjs.com/package/semantic-ui-calendar-react

but it 焦点闪烁或者换句话说,当我专注于输入字段时,它首先显示在顶部,然后显示在输入字段下方,为什么? 这是我的代码

https://codesandbox.io/s/prod-hill-mpurn https://codesandbox.io/s/prod-hill-mpurn

<div style={{ position: "absolute", top: 100, left: 100 }}>
        <DateInput
          name="date"
          placeholder="Date"
          value={date}
          popupPosition="right"
          onChange={handleChange}
        />
</div>

任何更新 ?


它有一个默认动画scale。您可以通过传递 prop `animation={false} 来关闭它,如下所示。

<DateInput
          name="date"
          placeholder="Date"
          value={date}
          popupPosition="right"
          onChange={handleChange}
          animation={false}
        />

代码沙箱:https://codesandbox.io/s/hloid https://codesandbox.io/s/hloid

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当焦点位于输入字段时,为什么 React 中的日期选择器会闪烁? 的相关文章

随机推荐

  • 如何将 Ruby 编译为 Javascript? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在研究一段逻辑 我想在服务器和浏览器中表达它 类似于验证表单 其中基于已输入的内容 元素之间必须存在某些逻辑关系 所以 如果我可以编写
  • 统一使用单例的最佳方法[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我想知道哪种是使用单例实例的正确方法 当我创建一个名为 Manager 的单例类并且它包含一个名为 value 的 int 变量并且我有另一个名
  • 通过代理服务器访问HTTPS站点

    我正在添加代码以使用代理服务器访问互联网 从正常 HTTP 位置请求文件时 该代码可以正常工作 但在访问安全位置 HTTPS 时则不起作用 这是运行良好的代码 URL http UnSecureSite net file xml Dim w
  • Blob 转换:获取 xlsx 文件

    我正在尝试发送一封电子邮件 其中包含xlsx文件已附加 但我遇到的问题是 当我下载该文件时 该文件以 PDF 格式打开 这是我的代码 function sendMail var sheet SpreadsheetApp getActiveS
  • React Native 中无法读取 null 错误的属性“绑定”

    从反应本机运行应用程序时 我在模拟器 设备上收到以下错误消息 ERROR The development server returned response error code 500 URL http 10 0 2 2 8081 inde
  • 语义版本控制中 -rc 的含义是什么?

    我了解了 MAJOR MINOR PATCH 的逻辑 并且直观地了解了 semver 编号末尾的 alpha 和 beta 的含义 但 rc 并没有给我敲响任何警钟 在那里找不到满意的答案 gt https semver org https
  • 基于带有图标的列的数据表搜索[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在制作一个带有状态列的数据表 我正在考虑提供搜索图标的可能性 因此 如果有人在搜索框中键入 打开 它应该显示带有 打开 图标的所有
  • 在 Windows 上安装 Pinax

    我可以安装吗Pinax http pinaxproject com 在 Windows 环境下 有简单的方法吗 您推荐哪种环境 我安装了 pinax 0 7rc1 并在 Windows 7 上运行 没有任何问题 请观看此视频 了解如何执行此
  • 更改文本字体大小以适应浏览器语言翻译时的 div 容器,而不是在视口更改上[重复]

    这个问题在这里已经有答案了 NOTE 这与响应视口更改的字体更改不同 IE 字体大小 3 2vw 纯 CSS 使字体大小根据动态字符数量进行响应 https stackoverflow com questions 14431411 pure
  • Pandas:删除重复索引的所有记录

    我有一个数据集 其中可能包含重复的标识符记录appkey 理想情况下 重复的记录不应该存在 因此我认为它们是数据收集错误 我需要删除一个的所有实例appkey这种情况发生不止一次 The drop duplicates方法在这种情况下没有用
  • 在 Jetty 中运行的 Grails 在没有布局模板的情况下呈现 404 错误页面

    我有一个 Grails 2 0 1 应用程序 我设置了以下 UrlMapping controller home 500 view error serverError 404 view error notFound 这是我的 notFoun
  • 如何在AWS中获取EC2实例的arn

    如何获取AWS中ec2实例的arn 我正在尝试使用资源标签 api 将标签添加到 EC2 实例 资源标签 api 需要所有资源的 arn 我如何获取它 您可以自己 构建 它 arn aws ec2
  • 如何将 UIImage 旋转 90 度?

    我有一个UIImage那是UIImageOrientationUp 纵向 我想逆时针旋转 90 度 横向 我不想使用CGAffineTransform 我想要的像素UIImage实际转移位置 我正在使用一段代码 如下所示 最初旨在调整UII
  • 如何停止优化器丢弃未使用的变量?

    我想调试我的代码 但无法访问进程中的内部层 因为这会干扰与硬件的通信 在监视列表会干扰基本读取访问的情况下执行易失性操作 因此 我正在测试接口的返回值 但 IAR 编译器甚至会优化未使用的易失性变量 和这样的声明 i object foo
  • Openlayers 3 中的拖放功能

    OpenLayers 2 OpenLayers Control DragFeature 功能的等效项是什么 我需要向地图添加一个可以用鼠标移动的图标 当掉落时我需要捕捉事件 在 OpenLayers 2 中 描述的功能是 new OpenL
  • Tableau - 计算日期小于另一个数据源的值的平均值

    我正在尝试计算 Tableau 中列的平均值 但问题是我正在尝试使用来自另一个数据源的单个日期值 基于筛选器 来仅计算考试日期 注意 参数在这里对我不起作用 因为新的日期值不断添加到集合中 我尝试了许多不同的方法 但最简单的方法是尝试使用计
  • 如何为多处理池中的单个进程分配Python请求会话?

    考虑以下代码示例 import multiprocessing import requests session requests Session data to be processed def process arg do stuff w
  • Android:计算两个位置之间距离的最佳方法

    我在这个主题上做了一些研究 但有很多观点并没有给出一个清晰的图像 我的问题是这样的 我正在为 Android 开发一个基于 GPS 的应用程序 在其中我想实时了解 Android LocationManager 指定的当前位置与其他位置之间
  • 使用pylab同时显示两个png图像

    我想打开两个 png 图像文件并将它们并排显示以进行视觉比较 我有以下代码用于打开一个 png 文件 我从 stackoverflow com 上的 unutbu 获得 import numpy as np import pylab imp
  • 当焦点位于输入字段时,为什么 React 中的日期选择器会闪烁?

    有人可以告诉我为什么当焦点位于输入字段时 React 中的 datepicker 会闪烁吗 我在我的演示中使用这个日期选择器 https www npmjs com package semantic ui calendar react bu