【React工作记录四十八】ant design inputNumber处理

简介: 【React工作记录四十八】ant design inputNumber处理

导语

歌谣 歌谣 对于项目中涉及金额的需要怎么处理呢




编辑


代码部分

// formatter 和 parser 
 <InputNumber
  style={{ width: '100%' }}
  value={baseInfo.minRepeatedlyAmount}
  onChange={(value) => this.handleChangeFormData(value,
 'minRepeatedlyAmount')}
  formatter={(value) => `¥ ${value}`.
replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  parser={(value) => value.replace(/¥\s?|(,*)/g, '')}
  min={0}
  step={0.01}
  precision={2}
/>

总结

用formatter 指定输入框展示值的格式 parser 指定从 formatter 里转换回数字的方式,和 formatter 搭配使用

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
698 0
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
132 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
275 0
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
815 0
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
220 0
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
226 0
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
195 0
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
458 0