如何阻止E,e, -, +, .的输入当input 的type是number in React JS

前言

程序员小周经过一周的加班终于可以功能提测，sei知道测试姐姐刚开始测就告诉小周，你这不行，你这些输入字段都应该限制成数字，小周一听，好办啊，改个type类型呗，卡卡改完代码，卡卡就提交啦！这时候产品哥哥跑过来跃跃欲测，我滴天，这个e是几个意思，这个+，-，.是咋个回事，留下目瞪口呆卡卡打脸滴小周，临走产品哥哥还安慰小周，没事，这个一百度就解决了= =|||

然后

小周跟这个e杠上了，不明白这个e到底是个啥身份，你又不是数字，你瞎凑什么热闹。一查目瞪口呆.jpg，e = 2.71828！好吧，看我怎么消灭你！

不出意外，如果你也是搜索input type number e的话，相信你一定能看到这个声称一句话搞定滴解决方式

<input type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">

如果你直接cope到你的react代码里面，第一步会报错告诉你onKeypress不存在，好吧，改成onKeyPress，不对，onKeyPress得赋个function，不能是string。那接着抽个方法

handleKeyPress(event) {    return (/[\d]/.test(String.fromCharCode(event.keyCode)));
}//render<input type="number" onKeypress={this.handleKeyPress}>

不出意外，这个时候你的e，+，-等等这些讨厌的字符还是存在，你找了好久，才发现event里面根本就没有keyCode，只有key，charCode，然后你又改

handleKeyPress(event) {    return (/[\d]/.test(String.fromCharCode(event.charCode)));
}//render<input type="number" onKeypress={this.handleKeyPress}>

咦，说好的一句话解决的呢！骗子，不好使！为什么呢！
仔细瞅瞅这句话，用正则验证每次输入的单个字符，即使返回false也并没有卵用啊，为了验证

<input type="number" onKeypress={false}>

哎果然，现象是一样的。
换个思路吧，其实就是想当key是e，E，+，-，.的时候阻止它的默认行为

handleKeyPress(event) {    const invalidChars = ['-', '+', 'e', '.', 'E']    if(invalidChars.indexOf(event.key) !== -1){
      event.preventDefault()
    }
}//render<input type="number" onKeypress={this.handleKeyPress}>

果然，搞定啦！

作者：MoZhou
链接：https://www.jianshu.com/p/a215bf7bb3cc