score:0

you can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

you can also specify the min value of the range

 <input type="number" min="1" max="999" />

score:0

you can make use of inputprops to set min and max length. like

inputprops={{ maxlength: 99999}}
    <textfield
        id="samplefiled"
        label="vcode"
        type="number"
        required
        classname="text-field"
        value={this.state.code}
        margin="normal"
        inputprops={{ maxlength: 99999}}
      />

score:5

isnan() and number can be combined to reject strings that don't evaluate to numbers.

see below for a practical example.

// field.
class field extends react.component {
  
  // state.
  state = { value: '' }

  // render.
  render = () => <input placeholder="numbers only" value={this.state.value} onchange={this.handlechange}/>
  
  // handle change.
  handlechange = ({target: {value}}) => this.setstate(state => value.length <= 6 && !isnan(number(value)) && {value} || state)

}

// mount.
reactdom.render(<field/>, document.queryselector('#root'))
<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>
<div id="root"></div>

score:12

  • insert the following function in input type="number"

    <input type = "number" maxlength = "5" oninput={this.maxlengthcheck} />

  • react function

     maxlengthcheck = (object) => {
     if (object.target.value.length > object.target.maxlength) {
      object.target.value = object.target.value.slice(0, object.target.maxlength)
       }
     }
    

Related Query

More Query from same tag