react下数字＜input type=“number“＞屏蔽步进器和滚动效果

1.屏蔽<input>右侧步进器

新建一个style.css文件，内容为

.numberinput::-webkit-inner-spin-button, 
.numberinput::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

在源码文件中引入该css，并且修改<input>的classname，加上“numberinput”即可

import './style.css'

<input
    className="numberinput text-sm gray-900 max-w-sm p-2 border border-gray-300"
    maxLength={19}
    type="number"
/>

2.屏蔽<input>在获取焦点后鼠标滚动可以改变值的问题。

给<input>加上这么一条属性即可。

onWheel={event => (event.target as HTMLInputElement).blur()}

3.其他方案

在onChange或onKeyPress中使用正则检查输入是否正确。或者干脆别用<input>，换<InputNumber>等包装好的组件

<input
    onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
        }
      }}
/>

<input 
    onChange={event => 
        this.setState({financialGoal: event.target.value.replace(/\D/,'')})
    }
/>