import React, { Component } from "react"; import ReactDOM from "react-dom"; import { localDataGet, localDataSet, localDataDelete } from "./utilities"; import Input from "./input"; import QrCode from "./qrcode"; import "./styles.css"; class App extends Component { constructor(props) { super(props); // local storage call const userLocalData = localDataGet(); // console.log("data from local storage"); // console.log(userLocalData); // initial app state this.state = { zipCode: userLocalData.zipCode ? userLocalData.zipCode : "" }; // bind functions this.handleZipcodeInputKeyDown = this.handleZipcodeInputKeyDown.bind(this); this.handleZipcodeInputKeyUp = this.handleZipcodeInputKeyUp.bind(this); this.handleZipcodeInputPaste = this.handleZipcodeInputPaste.bind(this); this.handleZipcodeSubmit = this.handleZipcodeSubmit.bind(this); } handleZipcodeInputKeyDown = e => { // this is called as soon as we get input from the user // we don't want to allow them the access to input past 5 digits // so we block on keyDown // (it never gets to keyUp, which actually updates the state) // restrict to 5 digits only // but allow backspace and arrow var key = e.which ? e.which : e.keyCode; if ( (e.target.value.length >= 5 && key !== 8 && key !== 37 && key !== 38 && key !== 39 && key !== 40) || (key === 18 || key === 189 || key === 229) ) { e.preventDefault(); } }; handleZipcodeInputKeyUp = e => { // set state of zipcode this.setState({ zipCode: e.target.value }); }; handleZipcodeInputPaste = e => { // test value: 123as8aa2129 e.preventDefault(); // get pasted content let pasteText = e.clipboardData.getData("text/plain"); // only allow integers pasteText = pasteText.replace(/[^0-9]/g, ""); // add to current input value (target) let newContent = e.target.value + pasteText; // only allow 5 digits total newContent = newContent.substring(0, 5); // set new value of input e.target.value = newContent; // set new state of zipcode this.setState({ zipCode: newContent }); }; handleZipcodeSubmit = () => { // console.log("store zipCode in local storage"); // console.log(this.state.zipCode); // store the zip code in local storage localDataSet("zipCode", this.state.zipCode); }; render() { return (

React :: Input Component

Examples of:
data validation
local storage
mobile number keyboard on input
limiting/filtering data

Input Vanilla:

Input Component: this.handleZipcodeInputKeyDown(e)} onKeyUp={e => this.handleZipcodeInputKeyUp(e)} onPaste={e => this.handleZipcodeInputPaste(e)} pattern="\d*" placeholder="Enter zipcode" type="number" value={this.state.zipCode} />

Things to try:
Paste string (123bb8aa2129) into input component
Input only accepts numbers
Refresh the app once you entered in a zipcode, zipcode should now be pulled from localStorage
View on mobile, on focus, number keyboard pops up...

); } } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

React :: Input Validation for Zip Code