Com react Hooks e Bootstrap fica dificil de entender onde posso obter os valores dos campos input. No onSubmit Handler passamos os event
const [validated, setValidated] = useState(false);
const handleSubmit = event => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
onde posso obter os valores de Email, password, name, etc...?
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="4" controlId="validationCustom01">
<Form.Label>First name</Form.Label>
<Form.Control
required
type="text"
placeholder="First name"
defaultValue="Mark"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustom02">
<Form.Label>Last name</Form.Label>
<Form.Control
required
type="text"
placeholder="Last name"
defaultValue="Otto"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustomUsername">
<Form.Label>Username</Form.Label>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
required
/>
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>City</Form.Label>
<Form.Control type="text" placeholder="City" required />
<Form.Control.Feedback type="invalid">
Please provide a valid city.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>State</Form.Label>
<Form.Control type="text" placeholder="State" required />
<Form.Control.Feedback type="invalid">
Please provide a valid state.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom05">
<Form.Label>Zip</Form.Label>
<Form.Control type="text" placeholder="Zip" required />
<Form.Control.Feedback type="invalid">
Please provide a valid zip.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Check
required
label="Agree to terms and conditions"
feedback="You must agree before submitting."
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)
Este é o exemplo do react-bootstrap...
Tenho a intenção de integrar com redux, mas a ultima versão que usava utilizava React.createRef
penso que com Hooks fica um pouco mais facil agora...
o Problema é que não encontro um bom tutorial que ajude a integrar react hooks redux e Bootstrap
O que pretendo no fundo é de um tutorial que ajude nesse sentido e já agora onde com este exemplo pego os valores dos inputs e se metodo onChange funciona.
Obrigado