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
|
||||
|
||||
* [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,
|
||||
"name": "webpack-react",
|
||||
"description": "example using webpack for react",
|
||||
"name": "form",
|
||||
"description": "form examples",
|
||||
"version": "0.0.1",
|
||||
"main": "index.js",
|
||||
"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 Hello from '../components/hello';
|
||||
import Form from '../components/form-value';
|
||||
import FormValues from '../components/form-values';
|
||||
import Login from '../components/login';
|
||||
|
||||
const Home = () => {
|
||||
//handle state
|
||||
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 = () => {
|
||||
event.preventDefault();
|
||||
console.log('handleSubmit() todo');
|
||||
console.log('value: '+value);
|
||||
console.log('value1: '+value1);
|
||||
console.log('value2: '+value2);
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
console.log('e.target.value: '+e.target.value);
|
||||
setValue(e.target.value);
|
||||
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);
|
||||
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 = (
|
||||
|
@ -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 (
|
||||
<>
|
||||
<h1>Home</h1>
|
||||
<h2>(React.js Lambda Function Component)</h2>
|
||||
<Hello msg="Hello World!" />
|
||||
<h3>Form</h3>
|
||||
{form}
|
||||
<h3>Login</h3>
|
||||
<Login/>
|
||||
<h3>Form with values</h3>
|
||||
{formValues}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue