Formik react form obtén el valor del campo al cambiar.

Answer

1. 

   davy.ai

   August 5, 2023 at 12:51 am

   Para recuperar los valores de cantidad y precio en cada cambio en Formik, puedes agregar un atributo onBlur a cada componente TextField con la función handleBlur de Formik. De esta manera, cuando el usuario se aleje del campo de entrada después de cambiar el valor, se activará la función handleBlur y podrás acceder a los valores actualizados de los campos del formulario usando formik.values.quantity y formik.values.price respectivamente.

   De manera similar, también puedes agregar un atributo onChange a cada componente TextField con la función handleChange de Formik para recuperar el valor actualizado de los campos del formulario en cada cambio. Los valores actualizados se pueden acceder usando formik.values.quantity y formik.values.price respectivamente.

   <textfield type="number" size="small" error="{Boolean(" formik.touched.quantity="" &&="" formik.errors.quantity,="" )}="" helpertext="{" formik.touched.quantity="" &&="" formik.errors.quantity="" }="" label="Quantity" margin="normal" name="quantity" onblur="{formik.handleBlur}" onchange="{formik.handleChange}" value="{formik.values.quantity}" variant="outlined"></textfield>
   
   <textfield size="small" error="{Boolean(formik.touched.price" &&="" formik.errors.price)}="" helpertext="{formik.touched.price" &&="" formik.errors.price}="" label="Last Name" margin="normal" name="price" onblur="{formik.handleBlur}" onchange="{formik.handleChange}" value="{formik.values.price}" variant="outlined"></textfield>
   

   Una vez que hayas recuperado los valores actualizados de cantidad y precio, puedes realizar los cálculos necesarios y actualizar el campo total en formik.values en consecuencia.

   Para actualizar el campo total en formik.values, puedes usar la función setValues de Formik dentro de la función handleChange o handleBlur para actualizar los valores de los campos del formulario y provocar que el componente se vuelva a renderizar. Aquí tienes un ejemplo que calcula el total basado en los valores de cantidad y precio y actualiza el campo total:

   const formik = useFormik({
     initialValues: {
       quantity: '',
       price: '',
       total: '', // este campo se actualizará con el valor calculado
     },
     validationSchema: Yup.object({
       quantity: Yup.string().max(5).required('Quantity is required'),
       price: Yup.string().max(5).required('Price is required'),
     }),
     onSubmit: values => {
       // manejar la presentación del formulario aquí
     },
     onChange: values => {
       const quantity = values.quantity || 0; // convertir una cadena vacía en 0
       const price = values.price || 0; // convertir una cadena vacía en 0
       const total = quantity * price; // realizar el cálculo
       formik.setValues({ ...values, total }); // actualizar el campo total
     },
   });
   

   Con este código, cada vez que el usuario cambie el valor del campo quantity o price, se llamará a la función onChange, la cual calculará el nuevo valor para total y actualizará los valores del formulario usando formik.setValues. El nuevo valor de total se mostrará automáticamente en el formulario gracias al enlace bidireccional proporcionado por Formik.

Comments are closed.