feat(form): add form with multiple inputs
This commit is contained in:
parent
a3d072c505
commit
91db4c3e8b
|
@ -12,3 +12,4 @@ present form examples based on grassroot project
|
||||||
# Links
|
# Links
|
||||||
|
|
||||||
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
|
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
|
||||||
|
* [How to handle multiple form inputs in reactjs](https://medium.com/zestgeek/how-to-handle-multiple-form-inputs-in-reactjs-2f68e3cf3cf8)
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"name": "webpack-react",
|
"name": "form",
|
||||||
"description": "example using webpack for react",
|
"description": "form examples",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
/*controlled component: input form value controlled by React*/
|
||||||
|
const FormValues = (props) => {
|
||||||
|
/*destructuring*/
|
||||||
|
const { value1, value1Name, value1Label, value2, value2Name, value2Label, onChange, onSubmit } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form onSubmit={onSubmit}>
|
||||||
|
<label>{value1Label}</label>
|
||||||
|
<input type="text" name={value1Name} value={value1} onChange={onChange} />
|
||||||
|
<br/>
|
||||||
|
<label>{value2Label}</label>
|
||||||
|
<input type="text" name={value2Name} value={value2} onChange={onChange} />
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default FormValues;
|
||||||
|
|
||||||
|
FormValues.propTypes = {
|
||||||
|
value1: PropTypes.string,
|
||||||
|
value1Name: PropTypes.string,
|
||||||
|
value1Label: PropTypes.string,
|
||||||
|
value2: PropTypes.string,
|
||||||
|
value2Name: PropTypes.string,
|
||||||
|
value2Label: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
onSubmit: PropTypes.func
|
||||||
|
};
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class Login extends Component {
|
||||||
|
|
||||||
|
state = {
|
||||||
|
email: '',
|
||||||
|
password: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
handleOnChange = event => {
|
||||||
|
console.log('event.target.id: '+event.target.id);
|
||||||
|
console.log('event.target.type: '+event.target.type);
|
||||||
|
console.log('event.target.className: '+event.target.className);
|
||||||
|
console.log('event.target.tagName: '+event.target.tagName);
|
||||||
|
console.log('event.target.name: '+event.target.name);
|
||||||
|
console.log('event.target.value: '+event.target.value);
|
||||||
|
console.log('event.target: '+event.target);
|
||||||
|
this.setState({
|
||||||
|
[event.target.name]: event.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<form>
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="text" name="email" onChange={this.handleOnChange} />
|
||||||
|
<br/>
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" name="password" onChange={this.handleOnChange} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,19 +1,44 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Hello from '../components/hello';
|
import Hello from '../components/hello';
|
||||||
import Form from '../components/form-value';
|
import Form from '../components/form-value';
|
||||||
|
import FormValues from '../components/form-values';
|
||||||
|
import Login from '../components/login';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
//handle state
|
//handle state
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
|
const [value1, setValue1] = useState('');
|
||||||
|
const [value1Name, setValue1Name] = useState('aName');
|
||||||
|
const [value1Label, setValue1Label] = useState('aLable: ');
|
||||||
|
const [value2, setValue2] = useState('');
|
||||||
|
const [value2Name, setValue2Name] = useState('bName');
|
||||||
|
const [value2Label, setValue2Label] = useState('bLable: ');
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
console.log('handleSubmit() todo');
|
console.log('value: '+value);
|
||||||
|
console.log('value1: '+value1);
|
||||||
|
console.log('value2: '+value2);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const handleChange = (e) => {
|
||||||
console.log('e.target.value: '+e.target.value);
|
console.log('event.target.id: '+event.target.id);
|
||||||
setValue(e.target.value);
|
console.log('event.target.type: '+event.target.type);
|
||||||
|
console.log('event.target.className: '+event.target.className);
|
||||||
|
console.log('event.target.tagName: '+event.target.tagName);
|
||||||
|
console.log('event.target.name: '+event.target.name);
|
||||||
|
console.log('event.target.value: '+event.target.value);
|
||||||
|
switch(event.target.name) {
|
||||||
|
case value1Name:
|
||||||
|
setValue1(event.target.value);
|
||||||
|
break;
|
||||||
|
case value2Name:
|
||||||
|
setValue2(event.target.value);
|
||||||
|
break;
|
||||||
|
case 'value':
|
||||||
|
setValue(event.target.value);
|
||||||
|
break;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const form = (
|
const form = (
|
||||||
|
@ -25,12 +50,30 @@ const Home = () => {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const formValues = (
|
||||||
|
<FormValues
|
||||||
|
value1={value1}
|
||||||
|
value1Name={value1Name}
|
||||||
|
value1Label={value1Label}
|
||||||
|
value2={value2}
|
||||||
|
value2Name={value2Name}
|
||||||
|
value2Label={value2Label}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
<h2>(React.js Lambda Function Component)</h2>
|
<h2>(React.js Lambda Function Component)</h2>
|
||||||
<Hello msg="Hello World!" />
|
<Hello msg="Hello World!" />
|
||||||
|
<h3>Form</h3>
|
||||||
{form}
|
{form}
|
||||||
|
<h3>Login</h3>
|
||||||
|
<Login/>
|
||||||
|
<h3>Form with values</h3>
|
||||||
|
{formValues}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue