Este es el componente para Dropdown:
<DropDownField name={formElement.name} label={formElement.name} value={formik.values[formElement.name] || ''} dropDownItems={formElement.name === 'Loan Details' ? loanEnum : formElement.enum} className={classes.flexGrow} onChange={dropDownChangeHandler} error={formik.touched[formElement.name] && Boolean(formik.errors[formElement.name])} helperText={formik.touched[formElement.name] && formik.errors[formElement.name]} /> y el componente DropDownField :
<FormControl fullWidth> {/* eslint-disable-next-line */} <InputLabel id="simple-select-label">{props.label}</InputLabel> <Select labelId="simple-select-label" id="simple-select" {...props}> {/* eslint-disable-next-line */} {props.dropDownItems.map((element, index) => ( <MenuItem key={element + index} value={element}> {element} </MenuItem> ))} </Select> </FormControl> Función onChange :
const dropDownChangeHandler = async (e) => { const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']); formik.handleChange(e); console.log(loanDetails); formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']); }; Ahora, en la función onChange , ¿cómo obtengo el índice de los elementos desplegables?
Creo que podría intentar agregar un atributo de datos a los elementos de su menú, por ejemplo:
{props.dropDownItems.map((element, index) => ( <MenuItem key={element + index} value={element} data-index={index}> {element} </MenuItem> ))} Y luego obtener ese índice de e.currentTarget.dataset.index o tomando el segundo argumento (hijo) enviado al controlador de eventos como se detalla en la sección onChange en esta página .
por ejemplo, algo como:
const dropDownChangeHandler = async (e) => { const index = +e.currentTarget.dataset.index; const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']); formik.handleChange(e); console.log(loanDetails); formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']); };o
const dropDownChangeHandler = async (e, child) => { const index = child.props['data-index']; const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']); formik.handleChange(e); console.log(loanDetails); formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']); };Está mapeando sobre los elementos, el método de mapa le brinda los índices del elemento, puede burbujear el índice del elemento seleccionado dado a través del controlador usando el accesorio onClick
{props.dropDownItems.map((element, index) => ( <MenuItem key={element + index} value={element} onClick={()=> handleItemClick(index)} > {element} </MenuItem> ))}El código handleItemClick será el siguiente
const handleItemClick = (idx) => { console.log(idx); }