只有数字在React中输入数字

(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决只有数字在React中输入数字？

我试图模仿您的代码，并发现 with <input type=’number’/>。有关解决方法，请检查此示例并自己尝试：https://codepen.io/zvona/pen/WjpKJX?editors=0010

您只需使用数字模式将其定义为普通输入（type =’text’）：

<input type='text' pattern='[0-9]*' onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

然后比较输入的有效性：

const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;

这种方法最大的警告是涉及移动->键盘不是数字形式而是普通字母形式。

解决方法

我试图从输入中排除减号和加号，但这是错误的：

handleChange(event) { const value = event.target.value.replace(/+|-/ig,’’); this.setState({financialGoal: value});}

渲染输入代码：

<input style={{width: ’150px’}} type='number' value={this.state.financialGoal} onChange={this.handleChange}/>