67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import React, {useState} from 'react';
|
|
import Button from 'react-bootstrap/Button';
|
|
import Form from 'react-bootstrap/Form';
|
|
|
|
export default function FForm() {
|
|
const handleFormSubmit=e=>{
|
|
e.preventDefault();
|
|
console.log('value:'+value);
|
|
//TODO Set value!?
|
|
console.log('event:'+event);
|
|
};
|
|
const [value,setValue]=useState('value');
|
|
const handleValue=(event, property)=>{
|
|
const target=event.target;
|
|
console.log('target:'+target);
|
|
event.preventDefault();
|
|
console.log('property:'+property);
|
|
if(property==='value'){
|
|
setValue(value);
|
|
}
|
|
}
|
|
return (
|
|
<Form
|
|
onSubmit={handleFormSubmit}
|
|
>
|
|
<Form.Group className="mb-3" controlId="formBasicText">
|
|
<Form.Label>Text</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
placeholder="Enter 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" placeholder="Enter email" />
|
|
<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 type="checkbox" label="Check me out" />
|
|
</Form.Group>
|
|
|
|
<Form.Group className="mb-3" controlId="formBasicCheckboxNext">
|
|
<Form.Check type="checkbox" label="Check me out next" />
|
|
</Form.Group>
|
|
|
|
<Button variant="secondary" type="submit">
|
|
Submit
|
|
</Button>
|
|
</Form>
|
|
);
|
|
}
|
|
|