只有数字.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 type='number' />.有关解决方法,请检查此示例并自行尝试:https://codepen.io/zvona/pen/WjpKJX？edit = 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;

这种方法最大的一点是当谈到移动时 - >键盘不是数字而是正常的字母格式.

Answer 2

在 React 中的简单方式

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

Answer 3

一行代码

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

Answer 4

• 要停止输入,请onKeyPress不要使用onChange.

• 使用event.preventDefault()内部onKeyPress意味着停止按下事件.

• 由于keyPress处理程序在之前被触发onChange,你必须检查按下的键(event.keyCode),而不是输入的当前值(event.target.value)

  onKeyPress(event) {
    const keyCode = event.keyCode || event.which;
    const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  

演示如下

const {Component} = React; 

class Input extends Component {
  

  onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  render() {
  
   return (
   <input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />

   )
  }
 
}

ReactDOM.render(<Input /> , document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section id="app"></section>

Answer 5

如果您想维护输入type='number'(可能是移动设备触发数字键盘),您应该使用onInput而不是onChange捕获事件更改.

使用onInput修复了一个错误,在数字输入中键入文本将绕过我分配给它的验证onChange.一旦我修复了这个函数,onInput在所有实例中都会触发它.

这是我正在做的一个例子:

<input
    type='number'
    id={`player${index}Score`}
    className='form-control'
    pattern='[0-9]{0,5}'
    onInput={(event) => this.enterScore(event, index)}
    value={this.props.scoreLabel(this.state.scores[index])}
/>

我希望这有帮助!

编辑 - 08-03-2018:

我想出了一个更好的解决方案.在输入组件本身中使用type ='tel'以及模式正则表达式.

我如何连接它的具体细节在这里:

class Input extends React.Component {
  state = {message: '3'};

  updateNumber = (e) => {
    const val = e.target.value;
    // If the current value passes the validity test then apply that to state
    if (e.target.validity.valid) this.setState({message: e.target.value});
    // If the current val is just the negation sign, or it's been provided an empty string,
    // then apply that value to state - we still have to validate this input before processing
    // it to some other component or data structure, but it frees up our input the way a user
    // would expect to interact with this component
    else if (val === '' || val === '-') this.setState({message: val});
  }

  render() {
    return (
      <input
        type='tel'
        value={this.state.message}
        onChange={this.updateNumber}
        pattern="^-?[0-9]\d*\.?\d*$"
      />
    );
  }
}

ReactDOM.render(<Input />, document.getElementById('main'));

我在这里有一个关于Codepen的例子

Answer 6

解

今天，我发现使用parseInt()也是一种很好的清洁做法。onChange(e)下面是一个示例。

码

onChange(e){
    this.setState({[e.target.id]: parseInt(e.target.value) ? parseInt(e.target.value) : ''})
}

说明

1. parseInt()NaN如果参数不是数字，则将返回。
2. parseInt('12a') 将返回12。

Answer 7

我发现最快的方法是添加一个 onKeyPress ，如下所示：

<input 
  type="text" 
  name="example"
  value="Type here"
  onKeyPress={(event) => {
      if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
      }
  }}
>