非負整数のみ入力を受け付ける

このプログラムでは、数値以外を含む入力を受け取った場合に数値のみをきれいに抜き出して入力することが出来ます。

import React from 'react';

class inputVal extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
        value = '';
    };
    this.handleChange = this.handleChange.bind(this);
    }

  handleChange(e){
    var value = e.target.value.replace(/\D/gi,'');
    if (/^([1-9]\d*|0|)$/.test(value)){
        this.setState({speed: value});
    } else if (/^0\d*$/.test(value)){
        this.setState({speed: value.match(/([1-9]\d*|0|)$/)[0]});
    } else if (value===null){
        this.setState({speed: ''})
    }
  }

  render(){
    return(
    <div>
        <input name='speed' type='tel' value={this.state.value} onChange={this.handleChange}/>
    </div>
    )
  }
}

解説

input要素は、type='tel'を指定します。type='num'で動かそうとすると、-などの記号が入ってしまうため、うまくいきません。かと言って何も指定しないと、スマホで入力する際に表示されるソフトウェアキーボードがいい感じにならないので、このようになっています。

handleChange(e)

1. 入力を受け取った直後に、replace(/\D/gi, '')によって数字以外の文字列を空文字列に置換します。
2. /^([1-9]\d*|0|)$/.test(value)により、0から始まらない数列をそのまま入力として受け取ります。
3. /^0\d*$/.test(value)により、0から始まる数列を受け取ったと判定された場合はvalue.match(/([1-9]\d*|0|)$/)[0]によって0を除いた数値として受け取ります。
4. 正規表現にマッチしない文字列を受け取った場合は、空文字列を返却します。

こうすることにより、05のような文字列を許容せず、例えば0を入力した直後に5を入力すると5のみが入力されるフォームを生成することが出来ます。

#コメントより
実は正規表現を使わなくてもイケるらしい。

import React from 'react';

class inputVal extends React.Component {
  
  handleChange(e){
    e.target.value = isNaN(parseInt(e.target.value)) || e.target.value < 0 ? '' : parseInt(e.target.value)
  }

  render(){
    return(
    <div>
        <input type='tel' onInput={this.handleChangeSpeed1}/>
    </div>
    )
  }
}

こちらのほうが記述量が少なくてシンプル。数値の範囲指定もついでに出来ますね。

以上です。