在 select 属性中调用方法 onChange

Question

当用户更改 dropdown 列表时，我必须 call 一个方法，应该调用 handleChange() 方法。

它应该同时打印 values。我们有 2 个属性 country 以及 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

当我在 select 标签中写 onChange= {(e)=>{handleChange(e)}} 而不是 onChange={formik.handleChange} 然后方法被调用但它打印 undefined.

我的要求是，当用户更改 dropdown 列表中的值时，它应该打印这两个值。我必须传递 API.

中的两个值

Answer 1

我认为在 handleChange 函数中打印值时有一个错误

应该是

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

从值中删除 s

Answer 2

我想您想在用户提交表单时进行 API 调用。为此，您应该将定义的 onSubmit 函数绑定到表单：

<form onSubmit={formik.handleSubmit}>

编辑以解决 OP 的评论：

您可以创建另一个绑定到 <select> 元素的 onChange 属性的函数。在其中，您可以调用 formik.handleChange 来更新 formik.values，然后继续执行其他操作：

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

...

<select
    name="activerequests"
    onChange={onDropdownValueChange}
    ...
/>

在 select 属性中调用方法 onChange

calling method onChange in select attribute

javascript

api

rest

reactjs

formik