正则表达式 输入数字格式化程序 ant-design

2024-02-19

伙计们,我真的不了解正则表达式,我正在使用 ant-design 输入数字组件来制作货币过滤器。

目前是这样的:

 <InputNumber
    style={{ width: 175 }}
    formatter={value => `R$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, 
    ".")}
    parser={value => value.replace(/[A-Z]|[a-z]|[$ ]|\.+/g, "")}
    onChange={(value) => setSelectedKeys(value ? value : [])}
  />

当前的格式,例如一千五百是这样的:1.500 我也需要它接受负数(-1.500)和逗号,例如 1.500,25

你们能帮我吗?我尝试了一些解决方案,但无法使其按照我的需要工作


伙计们,经过大量搜索后,我找到了一种解决方案,不可能是更好的解决方案,但目前正在完成其工作。

我安装了 MaskedInput 和 text-mask-addons 依赖项。

import MaskedInput from "react-text-mask";
import createNumberMask from "text-mask-addons/dist/createNumberMask";

const defaultMaskOptions = {
    prefix: "R$",
    suffix: "",
    includeThousandsSeparator: true,
    thousandsSeparatorSymbol: ".",
    allowDecimal: true,
    decimalSymbol: ",",
    decimalLimit: 2,
    integerLimit: 7,
    allowNegative: true,
    allowLeadingZeroes: false,
  };
  const currencyMask = createNumberMask(defaultMaskOptions);


const NumberFilter = (
    <Space style={{ marginRight: 20 }}>
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor inicial"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[0]}
            onChange={(event) => {
              props.onChange(event);
              let betweenInitial = [...selectedKeys];
              betweenInitial[0] = event.target.value;
              setSelectedKeys(betweenInitial);
            }}
          />
        )}
      />
      <RiArrowLeftRightLine />
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor final"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[1]}
            onChange={(event) => {
              props.onChange(event);
              let betweenFinal = [...selectedKeys];
              betweenFinal[1] = event.target.value;
              setSelectedKeys(betweenFinal);
            }}
          />
        )}
      />
    </Space>
  );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

正则表达式 输入数字格式化程序 ant-design 的相关文章

随机推荐

  • 如何将数据传递到 MSBuild 任务的 ITaskItem 属性?

    我有一个自定义任务 我在其中使用MSBuild 效果很好 以前 我有一些属性接受一些string数据 有人建议我应该将它们更改为ITaskItem的 这样 如果我有空间 就不会有问题 以前的代码 public class Compresso
  • 使用 facebook-android-sdk 4 未触发登录回调

    我有一个活动供用户使用 Facebook 登录 我使用 facebook android sdk v4 0 0 但是当用户点击登录按钮时 不会触发登录回调 显示进度条后 自动开始之前的活动 日志上不显示任何错误 而不是触发登录回调 在注册活
  • WCF 如何启用元数据?

    我正在尝试让我的 svc 文件在 IIS 下工作 在我的项目中 当我按 F5 时 svc 就开始工作了 所以我知道一切都好 对吗 IIS 除外 我正在 Windows XP Pro 计算机上工作 并在 IIS 中添加了一个虚拟目录 这是我的
  • Android MapView 带有滑动菜单遮挡菜单

    我在使用此滑动菜单的活动中有一个 android 地图 api v2 的地图视图https github com iPaulPro SlidingMenu https github com iPaulPro SlidingMenu 除了在地
  • WSO2 ESB - 用 Base64 写入文件

    我有一个代理 它接受包含 Base64 编码文件的 XML 文件 例如 XML 如下所示
  • Async Servlet - 首选实现

    最近 在研究异步处理时Servlets 我至少遇到了三种实现方法 使用这种方法的一些功能 问题是 哪一个是最好的 也许其中一些方法不推荐 也许还有另一种方法比下面提到的所有方法更好 找到的方法 Using AsyncContext star
  • Flutter安装在windows环境变量中

    我在尝试首先在桌面上安装 flutter 时遇到问题 出现以下错误 不被识别为内部或外部命令可操作程序或批处理文件 然后我打开系统环境变量并将 flutter 添加到用户变量路径 并将所有 flutter git system32 添加到系
  • silverlight/wcf ria 中的部分实体加载和管理

    我有一个 Silverlight 4 应用程序 它使用 WCF RIA 服务从数据库中提取实体 这些数据对象相当简单 只有几个字段 但其中一个字段包含任意大小的二进制数据 应用程序基本上需要在用户登录后尽快访问这些数据 以在列表中显示 启用
  • X509 主题备用名称 (subjectAltName) IP 地址字段

    X509v3 可以包含IP地址字段在subject Alternative Name扩大 作为验证服务器身份的应用程序 IP地址字段应该如何验证 DNS 名称和 IP 地址是否都存在 是否存在对其中一种的偏好 有什么用dirName fie
  • 如何访问应用程序特定文件夹并使用它来备份或某些应用程序特定数据?迅速

    我想创建一个应用程序 其中某些类型的数据将同步到应用程序特定文件夹中的谷歌驱动器 并且可以进一步访问它以检索数据并填充到应用程序中 如果不知何故用户的手机丢失并且用户使用另一部手机 并且当用户登录同一谷歌帐户时 应该获取该数据 My pro
  • Android SoftKeyboard 如何创建自己的建议

    我正在开发一个基于软键盘示例的键盘 我想知道如何创建自己的建议 我在 Candidate View Class 中看到 setSuggestion 方法 但在该方法的参数中 我看到字符串 建议 列表被传递到此方法中 我的问题是 我是否必须为
  • wxPython 框架上的背景图像

    MMGP 已回答 但不会让我相信他是正确的 所以我至少会在这里提到他 我终于相信了他 8 他的链接讨论 http wiki wxpython org DoubleBufferedDrawingon Double Buffering 提供了经
  • ":eq()" 和 .eq() 之间的区别

    我最近开始学习jQuery 考虑到以下html结构 我想知道选择器之间的基本区别是什么 ul gt li eq 2 and ul gt li eq 2 ul li one li li two li li three li li four l
  • Pandas DataFrame-查找列的索引值

    我有一个 DataFrame 其中包含 ID 名称 规格 时间等列 我打开它们的文件路径 mc pd read csv C data csv sep header 0 dtype str 当我检查我的列值时 使用 mc coulumns v
  • 使用 svcutil 为客户端代理生成 xsd 文件

    我正在尝试使用 Svcutil 导出元数据以从本地托管服务生成代理 我不想进入 Visual Studio 并单击 添加服务引用 因为这是我的学习练习 我使用 svcutil 如下 Svcutil d c temp t 元数据http lo
  • 如何从tomcat webapp中的context.xml文件获取资源?

    这是我的上下文 xml file
  • 打开 Javascript 文件时 Visual Studio 2015 崩溃

    每次我使用 Visual Studio 2015 Pro RTM 打开 Javascript 文件时 它都会崩溃并重新启动 没有错误消息 我进行了修复 但尚未尝试卸载并重新安装 还有其他人遇到这个问题吗 好吧 我终于想通了 它确实与 ref
  • MouseDown 在网格中不起作用(仅适用于网格中的按钮)

    我的 MouseDown 事件有问题 我的应用程序看起来像这样 我有网格 我在后面的代码中添加按钮
  • JavaScript:为什么map.has比set.has和array.indexOf快这么多?

    我遇到了以下基准 https jsperf com array includes and find methods vs set has https jsperf com array includes and find methods vs
  • 正则表达式 输入数字格式化程序 ant-design

    伙计们 我真的不了解正则表达式 我正在使用 ant design 输入数字组件来制作货币过滤器 目前是这样的