Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

247
Vistas
calling method onChange in select attribute

I have to call a method when user changes dropdown list ,handleChange() method should be called.

and it should print both the values. we have 2 attribute country as well as 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

enter image description here

when in select tag I write onChange= {(e)=>{handleChange(e)}} instead of onChange={formik.handleChange} then method get called but it prints undefined.

what my requirement is when user changed values in dropdown list it shoud print both the values. I have to pass both the values in API.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I suppose you want to make an API call when the user submits the form. To do that, you should bind the onSubmit function that you have defined to the form:

<form onSubmit={formik.handleSubmit}>

Edit to address OP's comment:

You can create another function that binds to the <select> element's onChange attribute. Inside of it, you can call formik.handleChange to update formik.values and then go on to do anything else:

const onDropdownValueChange = (e) => {
    formik.handleChange(e);
    // make API call
};

...

<select
    name="activerequests"
    onChange={onDropdownValueChange}
    ...
/>
about 4 years ago · Juan Pablo Isaza Denunciar

0

I think there is one mistake while printing value in handleChange function

it should be

alert("Visited field "+JSON.stringify(event.target.value));

remove s from the value

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda