Tengo que call
a un método cuando el usuario cambia la lista dropdown
, se debe llamar al método handleChange()
.
y debería imprimir ambos values
. tenemos 2 country
de atributo, así como activerequests
import React from 'react' import { useFormik } from 'formik'; import * as Yup from 'yup'; function YourActionNew() { const initialValues={ country: '', activerequests:'' } const onSubmit=(values:any)=>{ console.log('Form Data',values); } const handleChange = async ( event: any) => { alert("Visited field "+JSON.stringify(event.target.values)); }; const validationSchema = Yup.object({ country:Yup.string().required('Required'), activerequests:Yup.string().required('Required') }) const formik = useFormik({ initialValues, onSubmit, validationSchema }); console.log("Visited field "+JSON.stringify(formik.values)); return ( <div> <form > <div className='form-control'> <label htmlFor='country'>Country</label> <input type='text' id='country' name='country' onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.country}/> {formik.touched.country && formik.errors.country? <div className='error'>{formik.errors.country}</div>:null} </div> <div className="form-control"> <label htmlFor="activerequests">Active Requests</label> <select name="activerequests" onChange= {formik.handleChange} onBlur={formik.handleBlur} value={formik.values.activerequests}> <option value="All" onChange={formik.handleChange}>All </option> <option value="YES" onChange={formik.handleChange}>Yes </option> <option value="NO" onChange={formik.handleChange}>No</option> </select> </div> <button type="submit">Submit</button> </form> </div> ) } export default YourActionNew
cuando en la etiqueta de select
escribo onChange= {(e)=>{handleChange(e)}}
en lugar de onChange={formik.handleChange}
y luego se llama al método pero se imprime undefined
.
cuál es mi requisito cuando el usuario cambió los valores en la lista dropdown
, debe imprimir ambos valores. Tengo que pasar ambos valores en API
.
Supongo que desea realizar una llamada API cuando el usuario envía el formulario. Para hacerlo, debe vincular la función onSubmit
que ha definido al formulario:
<form onSubmit={formik.handleSubmit}>
Editar para abordar el comentario de OP:
Puede crear otra función que se vincule al atributo onChange
del elemento <select>
. Dentro de él, puede llamar a formik.handleChange
para actualizar formik.values
y luego hacer cualquier otra cosa:
const onDropdownValueChange = (e) => { formik.handleChange(e); // make API call }; ... <select name="activerequests" onChange={onDropdownValueChange} ... />
Creo que hay un error al imprimir el valor en la función handleChange
debería ser
alert("Visited field "+JSON.stringify(event.target.value));
eliminar s del valor