react中input输入框显示字数

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

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

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

实现：

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

效果如下：