105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import React, {useState} from 'react';
|
|
import Button from 'react-bootstrap/Button';
|
|
import Form from 'react-bootstrap/Form';
|
|
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=>{
|
|
console.log('handleFormSubmit() started...');
|
|
e.preventDefault();
|
|
console.log('handleFormSubmit() value:'+value);
|
|
console.log('handleFormSubmit() valueCheck:'+valueCheck);
|
|
console.log('handleFormSubmit() valueCheckNext:'+valueCheckNext);
|
|
console.log('handleFormSubmit() valueEmail:'+valueEmail);
|
|
//TODO Set value!?
|
|
console.log('event:'+event);
|
|
console.log('handleFormSubmit() done.');
|
|
};
|
|
const handleValue=(event, property)=>{
|
|
console.log('handleValue() started...');
|
|
const target=event.target;
|
|
console.log('handleValue() target:'+target);
|
|
console.log('handleValue() target.value:'+target.value);
|
|
event.preventDefault();
|
|
console.log('property:'+property);
|
|
if(property==='value'){
|
|
console.log('property value detected!');
|
|
}
|
|
setValue(target.value);
|
|
console.log('handleValue() done.');
|
|
};
|
|
const handleValueEmail=(event)=>{
|
|
event.preventDefault()
|
|
setValueEmail((valueEmail)=>event.target.value);
|
|
};
|
|
return (
|
|
<Form
|
|
onSubmit={handleFormSubmit}
|
|
>
|
|
<Form.Group className="mb-3" controlId="formBasicText">
|
|
<Form.Label>Text</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={value}
|
|
onChange={handleValue}
|
|
/>
|
|
<Form.Text className="text-muted">
|
|
We'll never share your text with anyone else.
|
|
</Form.Text>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
<Form.Label>Email address</Form.Label>
|
|
<Form.Control
|
|
type="email"
|
|
value={valueEmail}
|
|
onChange={handleValueEmail}
|
|
/>
|
|
<Form.Text className="text-muted">
|
|
We'll never share your email with anyone else.
|
|
</Form.Text>
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicPassword">
|
|
<Form.Label>Password</Form.Label>
|
|
<Form.Control type="password" placeholder="Password" />
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicCheckbox">
|
|
<Form.Check
|
|
label="Check me out"
|
|
checked={valueCheck}
|
|
name="valueCheck"
|
|
id="valueCheck"
|
|
onChange={(event) => setValueCheck(event.currentTarget.checked)}
|
|
type="checkbox"
|
|
/>
|
|
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicCheckboxNext">
|
|
<Form.Check
|
|
label="Check me out next"
|
|
checked={valueCheckNext}
|
|
name="valueCheckNext"
|
|
id="valueCheckNext"
|
|
onChange={(event) => setValueCheckNext(event.currentTarget.checked)}
|
|
type="checkbox"
|
|
/>
|
|
</Form.Group>
|
|
|
|
<Button variant="secondary" type="submit">
|
|
Submit
|
|
</Button>
|
|
</Form>
|
|
);
|
|
}
|
|
|