├── .gitignore ├── .nvmrc ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 12.3.1 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## What is the demo 2 | 3 | Simple demo to show handling multiple inputs and input types in a single form change handler in React. 4 | 5 | ## To Run 6 | 7 | ``` 8 | nvm use 9 | npm install 10 | npm start 11 | ``` 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-single-change-handler", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-scripts": "3.0.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaketrent/demo-single-change-handler/4c8508f86536643c0285df5ac89d27140766d6ee/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | form { 5 | padding: 16px; 6 | border: 1px solid #ccc; 7 | } 8 | label, 9 | input, 10 | textarea, 11 | select { 12 | display: block; 13 | width: 100%; 14 | } 15 | input, 16 | textarea, 17 | select { 18 | line-height: 24px; 19 | font-size: 14px; 20 | border: 1px solid #ccc; 21 | border-radius: 2px; 22 | } 23 | input, 24 | select { 25 | height: 24px; 26 | } 27 | input[type="checkbox"], 28 | input[type="radio"] { 29 | position: relative; 30 | bottom: -2px; 31 | display: inline-block; 32 | height: 16px; 33 | width: 16px; 34 | margin-left: 8px; 35 | } 36 | textarea { 37 | height: 48px; 38 | } 39 | pre { 40 | background: #efefef; 41 | padding: 16px; 42 | border-radius: 4px; 43 | white-space: pre-wrap; 44 | overflow: hidden; 45 | } 46 | .app { 47 | width: 320px; 48 | max-width: 100%; 49 | margin: 32px auto; 50 | } 51 | .heading { 52 | display: inline-block; 53 | font-weight: bold; 54 | margin: 16px 0 8px 0; 55 | } 56 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | 4 | export default function App() { 5 | const [state, setState] = React.useState({ 6 | firstName: "", 7 | lastName: "", 8 | bio: "", 9 | hooks: true, 10 | level: "master", 11 | version: "16.5" 12 | }); 13 | 14 | function handleChange(evt) { 15 | const value = 16 | evt.target.type === "checkbox" ? evt.target.checked : evt.target.value; 17 | setState({ 18 | ...state, 19 | [evt.target.name]: value 20 | }); 21 | } 22 | 23 | return ( 24 |
25 |
26 | 35 | 44 |