diff --git a/react-bootstrap/app/components/form.jsx b/react-bootstrap/app/components/form.jsx index 3ec7dbb..c54322d 100644 --- a/react-bootstrap/app/components/form.jsx +++ b/react-bootstrap/app/components/form.jsx @@ -1,24 +1,44 @@ 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('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!? console.log('event:'+event); + console.log('handleFormSubmit() done.'); }; - const [value,setValue]=useState('value'); const handleValue=(event, property)=>{ + console.log('handleValue() started...'); const target=event.target; - console.log('target:'+target); + console.log('handleValue() target:'+target); + console.log('handleValue() target.value:'+target.value); event.preventDefault(); console.log('property:'+property); 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 (
Text @@ -38,7 +57,11 @@ export default function FForm() { Email address - + We'll never share your email with anyone else. @@ -50,11 +73,26 @@ export default function FForm() { - + setValueCheck(event.currentTarget.checked)} + type="checkbox" + /> + - + setValueCheckNext(event.currentTarget.checked)} + type="checkbox" + />