博客

在某一开发中

需求第一天：我只需要一个可编辑的Input框，ok简单：

<Input placeholder="我是一个可编辑的input框" />

需求第二天：我希望这个input框只能输入数字：

<InputNumber onChange={onChange} />

需求第三天：我希望这个框只能保留小数点后两位，且进行四舍五入：

<InputNumber type="number" precision={2} placeholder="保留小数点后两位" />

需求第四天：我希望这个框只能输入非负的正整数：

<InputNumber placeholder="请输入非负的正整数" type="number" min={0} precision={0} /> 

需求第五天：客户说这个体验不好，禁止输入小数点和其他除数字以外字符：

<InputNumber placeholder="请输入非负的正整数" type="number" min={0} onKeyPress={handleKeyPress}  /> 

// onKeyPress时禁止输入小数点及其他特殊数字字符
const handleKeyPress = (event) => {
   const invalidChars = ['-', '+', 'e', '.', 'E']
   if(invalidChars.indexOf(event.key) !== -1){
      event.preventDefault()
   }
}