Con React JS, tengo un formulario con dos componentes hijos: uno para un input de caracteres y el otros para unos botones que un futuro los usaré cómo checkbox. Mi pregunta va dirigida al primer componente, el del input. Necesito enviar el valor de un input del componente hijo llamado NumCarac.js, al componente padre llamado Formulario.js
El código del componente hijo es:
import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
const NumCarac = () => {
const [caracteres, setCaracteres] = useState(12);
return (
<Form.Group className="mb-3" controlId="#">
<Form.Label>Número de caracteres</Form.Label>
<Button
onClick={() => {
if (caracteres > 1) {
setCaracteres(caracteres - 1);
}
}}
>
-
</Button>
<Form.Control type="text" value={caracteres} readOnly />
<Button onClick={() => setCaracteres(caracteres + 1)}>+</Button>
</Form.Group>
);
};
export default NumCarac;
Y el del padre:
import React from "react";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import NumCarac from "./NumCarac";
import Check from "./Check";
const Formulario = () => {
return (
<Form>
<NumCarac></NumCarac>
<Check></Check>
<Button variant="primary" type="submit">
Generar Contraseña
</Button>
<Form.Control type="text" value="V;ZQf}seH3Ij" readOnly />
</Form>
);
};
export default Formulario;