只有数字。在React中输入数字

Question

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

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}/>

Answer 1

我试图模仿您的代码，并发现 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;

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