Antd的Input，加后缀

最新推荐文章于 2024-06-17 20:35:21 发布

随看随点赞，养成好习惯

最新推荐文章于 2024-06-17 20:35:21 发布

阅读量1.2k

点赞数 1

分类专栏： React与Antd 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/forzhongguo/article/details/130249921

版权

React与Antd 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了在React应用中处理Input输入框的前缀和后缀显示的方法，包括使用原生Input组件的prefix和suffix属性以及在状态管理中动态添加和移除后缀的策略，例如在onChange事件中利用正则表达式过滤掉特定字符。

摘要由CSDN通过智能技术生成

第一种

首先，使用原生的。Input组件中，有 <Input prefix="￥" suffix="RMB" /> 可以实现，前缀与后缀。

效果如图，但是，这种原生的会恒左对齐，且自带加粗样式。

如果不想要这种，还有第二种

第二种

在渲染时，加上后缀，在改变时去除掉后缀。

重点在于：

value={this.state.value+'元'}

value = value.replace(/元/g, '')

一个显示是加上后缀，一个改变的去掉后缀。

必要也可以改变时使用正则去过滤掉。

<Input
                            value={this.state.value+'元'}
                            onChange={(e) => {
                              let value = e.target.value;
                              value = value.replace(/元/g, '');// 替换掉所有的元字，                               this.setState({value})
                            }}
                          />

效果图