只有数字。在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

简单的方式反应

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

Answer 2

一行代码

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

Answer 3

我试着模仿你的代码，发现React with

您需要将其定义为普通输入（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;

这种方法的最大警告是当涉及到移动设备时-