feat(react-bootstrap): adjust form
This commit is contained in:
parent
16c5306099
commit
a76c15d4a8
|
@ -1,24 +1,44 @@
|
||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import Button from 'react-bootstrap/Button';
|
import Button from 'react-bootstrap/Button';
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
|
|
||||||
export default function FForm() {
|
export default function FForm() {
|
||||||
|
const [value,setValue]=useState('Enter text');
|
||||||
|
|
||||||
|
//ATTENTION: omit infinite loop by change handling function
|
||||||
|
//https://stackoverflow.com/questions/32923255/react-checkbox-doesnt-toggle
|
||||||
|
const [valueCheck,setValueCheck]=useState(true);
|
||||||
|
const [valueCheckNext,setValueCheckNext]=useState(false);
|
||||||
|
console.log('FForm() valueCheck:'+valueCheck);
|
||||||
|
console.log('FForm() valueCheckNext:'+valueCheckNext);
|
||||||
|
const [valueEmail,setValueEmail]=useState('Enter email');
|
||||||
const handleFormSubmit=e=>{
|
const handleFormSubmit=e=>{
|
||||||
|
console.log('handleFormSubmit() started...');
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log('value:'+value);
|
console.log('handleFormSubmit() value:'+value);
|
||||||
|
console.log('handleFormSubmit() valueCheck:'+valueCheck);
|
||||||
|
console.log('handleFormSubmit() valueCheckNext:'+valueCheckNext);
|
||||||
|
console.log('handleFormSubmit() valueEmail:'+valueEmail);
|
||||||
//TODO Set value!?
|
//TODO Set value!?
|
||||||
console.log('event:'+event);
|
console.log('event:'+event);
|
||||||
|
console.log('handleFormSubmit() done.');
|
||||||
};
|
};
|
||||||
const [value,setValue]=useState('value');
|
|
||||||
const handleValue=(event, property)=>{
|
const handleValue=(event, property)=>{
|
||||||
|
console.log('handleValue() started...');
|
||||||
const target=event.target;
|
const target=event.target;
|
||||||
console.log('target:'+target);
|
console.log('handleValue() target:'+target);
|
||||||
|
console.log('handleValue() target.value:'+target.value);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
console.log('property:'+property);
|
console.log('property:'+property);
|
||||||
if(property==='value'){
|
if(property==='value'){
|
||||||
setValue(value);
|
console.log('property value detected!');
|
||||||
}
|
}
|
||||||
}
|
setValue(target.value);
|
||||||
|
console.log('handleValue() done.');
|
||||||
|
};
|
||||||
|
const handleValueEmail=(event)=>{
|
||||||
|
event.preventDefault()
|
||||||
|
setValueEmail((valueEmail)=>event.target.value);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
onSubmit={handleFormSubmit}
|
onSubmit={handleFormSubmit}
|
||||||
|
@ -27,7 +47,6 @@ export default function FForm() {
|
||||||
<Form.Label>Text</Form.Label>
|
<Form.Label>Text</Form.Label>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Enter text"
|
|
||||||
value={value}
|
value={value}
|
||||||
onChange={handleValue}
|
onChange={handleValue}
|
||||||
/>
|
/>
|
||||||
|
@ -38,7 +57,11 @@ export default function FForm() {
|
||||||
|
|
||||||
<Form.Group className="mb-3" controlId="formBasicEmail">
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
||||||
<Form.Label>Email address</Form.Label>
|
<Form.Label>Email address</Form.Label>
|
||||||
<Form.Control type="email" placeholder="Enter email" />
|
<Form.Control
|
||||||
|
type="email"
|
||||||
|
value={valueEmail}
|
||||||
|
onChange={handleValueEmail}
|
||||||
|
/>
|
||||||
<Form.Text className="text-muted">
|
<Form.Text className="text-muted">
|
||||||
We'll never share your email with anyone else.
|
We'll never share your email with anyone else.
|
||||||
</Form.Text>
|
</Form.Text>
|
||||||
|
@ -50,11 +73,26 @@ export default function FForm() {
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
|
||||||
<Form.Group className="mb-3" controlId="formBasicCheckbox">
|
<Form.Group className="mb-3" controlId="formBasicCheckbox">
|
||||||
<Form.Check type="checkbox" label="Check me out" />
|
<Form.Check
|
||||||
|
label="Check me out"
|
||||||
|
checked={valueCheck}
|
||||||
|
name="valueCheck"
|
||||||
|
id="valueCheck"
|
||||||
|
onChange={(event) => setValueCheck(event.currentTarget.checked)}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
|
||||||
<Form.Group className="mb-3" controlId="formBasicCheckboxNext">
|
<Form.Group className="mb-3" controlId="formBasicCheckboxNext">
|
||||||
<Form.Check type="checkbox" label="Check me out next" />
|
<Form.Check
|
||||||
|
label="Check me out next"
|
||||||
|
checked={valueCheckNext}
|
||||||
|
name="valueCheckNext"
|
||||||
|
id="valueCheckNext"
|
||||||
|
onChange={(event) => setValueCheckNext(event.currentTarget.checked)}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
|
||||||
<Button variant="secondary" type="submit">
|
<Button variant="secondary" type="submit">
|
||||||
|
|
|
@ -9,10 +9,10 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^5.2.3",
|
"bootstrap": "5.2.3",
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-bootstrap": "^2.7.2",
|
"react-bootstrap": "2.7.2",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
Loading…
Reference in New Issue