900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > react中input输入框显示字数

react中input输入框显示字数

时间:2022-12-11 20:50:46

相关推荐

react中input输入框显示字数

使用suffix属性显示输入框输入的字数

工作中遇到一个需求,要在input输入框后面展示字数。查看react文档发现可以使用showCount属性,结果用了之后没效果……才发现showCount属性是react4.x版本中的属性,当前项目是react3.x版本。于是又阅读3.x文档,发现可以借助suffix属性来实现。

思路:

首先定义一个变量用来记录字数的变化,然后在输入框内容改变的时候更新该变量就可以了。

实现:

<Inputplaceholder="请输入内容"maxLength={20}style={{width: 400 }}suffix={<span>{inputCount}/20</span>} //inputCount为字数变量,20是最大长度。onChange={(e) => {this.setState({inputCount:e.target.value.length});}}/>

效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。