ant design inputNumber 组件带有人民币符号

inputNumber 组件带有人民币符号，webpack打包后，显示错乱

1.先看官方给的代码：

 <InputNumber formatter={value => `￥${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}parser={value => value.replace(/\￥\s?|(,*)/g, '')}style={{ width: '100%' }}  min={0}
/>

2.这样写得代码，在本地运行不会提示错误，但webpack打包以后，就会出现显示错乱：

3.思考：

为什么webpack打包以后就显示不正常了呢？这里第一反应就是正则表达式有问题了，所以我们对正则表达式进行修改，

去掉人民币￥符号前面的\，这里我猜测应该是webpack打包的时候，识别成了转义字符了。

<InputNumber formatter={value => `￥${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}parser={value => value.replace(/￥\s?|(,*)/g, '')}style={{ width: '100%' }}  min={0}
/>

4.总结，有时候官方给的代码也会出现问题吧！但只要明白正则表达式的写法，问题原因就很快能找到了。

有问题，请联系我：

1798274010@qq.com

ant design inputNumber 组件带有人民币符号相关推荐

Ant Design Blazor 组件库的路由复用多标签页介绍
前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 SignalR (WebSocket)构建前端应用程序,基于 WebAssembly 托管模型的 Blazor ...
ant design vue 组件 Tree
ant design vue 组件 Tree 实现效果: 实现代码: <div class="tree"><a-treeshow-iconshow-line:lo ...
【前端笔记】Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较
Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较关键词:React,Ant Design,Form组件,组件渲染一.问题描述 Form ...
ant design Menu组件子菜单样式设置
ant design Menu组件子菜单样式设置 Menu二级子菜单宽度较宽,直接设置width不起作用,会被他自带的min-width覆盖解决办法:设置组件的全局样式,提升优先级,如下所示: &l ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...
react + ant design InputNumber在form.item中如何设置格式比如 KG，CM
第一种:只有一个符号格式,比如￥, $, %, &, 等等.参考antdesign 官网参考链接:https://ant.design/components/input-number-cn/ ...
Ant Design Cascader组件实现联级组件实现省市区联动
Ant Design Cascader 联级组件实现省市区联动 <a-form ref="formRegister" :form="form" id=&q ...
React开发（265）:ant design InputNumber
## 所有输入价格的地方,都使用InputNumber 组件```javascript // formatter 和 parser <InputNumberstyle={{ width: '10 ...

ant design inputNumber 组件带有人民币符号

ant design inputNumber 组件带有人民币符号相关推荐

最新文章

热门文章