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