input 限制字数输入时候 限制字数会出现负数

如下图这是bug效果:

解决方法：

由于用的是React写法如下：
复制代码

// render: 
<input
    maxLength={NAMETOTAL}
    placeholder={'点击填写作品名称'}
    type="text"
    value={workName}
    onChange={this.handleChangeTitle}
    onCompositionEnd={this.handleChangeTitleCountNum}
    onCompositionStart={this.handleChangeTitleCountNum}
/>
// 上面的函数：
/* 
* NAMETOTAL：总长度
* workName: 名字
* countNum：是否开始计数
* workNameFontLimit：作品名称字数限制
*/
handleChangeTitle (e) {
    this.setState({
        workName: e.target.value
    }, () => {
        if (!this.state.countNum) {
            this.setState({
                workNameFontLimit: NAMETOTAL - this.state.workName.length
            });
        }
    });
}
handleChangeTitleCountNum (e) {
    if (e.type === 'compositionend') {
        this.setState({
            countNum: false
        }, () => {
            this.setState({
                workNameFontLimit: NAMETOTAL - this.state.workName.length
            });
        });
    } else if (e.type === 'compositionstart') {
        this.setState({
            countNum: true
        });
    }
}

复制代码

相关知识点

compositionstart 事件触发于一段文字的输入之前
（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入
可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend当文本合成系统（如输入法编辑器）完成或取消当前合成会话时，将触发该事件。
复制代码

转载于:https://juejin.im/post/5cb871e2f265da03914d5bb1