0

Amig@s, tengo un select implementado con Material-Ui donde necesito obtener el id del elemento seleccionado, debido a que poseo una tabla que va aumentando su numero de filas dada una condición.

En resumen, no tengo problema en obtener el value y name del elemento mencionado, pero cuando trato de mirar el id siempre llega undefined, no así cuando utilizo un Select de react-bootstrap por ejemplo.

Les dejo un extracto del código

const [types, setTypes] = React.useState([])
const [data, setData] = React.useState({ fieldType: '' })

React.useEffect(() => {
   const aux = [
      { id: 10, value: 'GET' },
      { id: 20, value: 'POST' },
      { id: 30, value: 'PUT' } 
   ]
   setTypes(aux)
}, [])

const handleChange = event => {
   setData({
      [event.target.name] : event.target.value
   })
}

<FormControl className={classes.formControl} variant="outlined">
   <InputLabel>Tipo 1</InputLabel>
   <Select label='Tipo' id='tipo 1' value={data.fieldType} inputProps={{ name: 'fieldType'}} onChange={handleChange}>
      <MenuItem disabled value="">
         <em>Seleccione</em>
      </MenuItem>
      {types.map((v, i) => (
         <MenuItem key={i} value={v.id}>{v.value}</MenuItem>
      ))}
   </Select>
</FormControl>

Acá un ejemplo más completo :)

Como siempre, cualquier ayuda u orientación se agradece

1 respuesta 1

1

Tienes que usar:

event.currentTarget.id

en vez de

event.target.id

Así cogerá el id perteneciente a MenuItem (en este caso 'tipo 1'). El ejemplo que has dejado entonces quedaría asi:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { InputLabel, Select, MenuItem, FormControl } from '@material-ui/core'

const useStyles = makeStyles(theme => ({
    formControl: {
        margin: '30px 0 35px 0',
        minWidth: '100%',
        maxWidth: 300
    }
}))

function Hello() {
  const classes = useStyles()
  const [types, setTypes] = React.useState([])
  const [data, setData] = React.useState({
    fieldType: ''
  })

  React.useEffect(() => {
    const aux = [
      { id: 10, value: 'GET' },
      { id: 20, value: 'POST' },
      { id: 30, value: 'PUT' } 
    ]
    setTypes(aux)
  }, [])

  const handleChange = event => {
    console.log(`Id: ${event.currentTarget.id} | name: ${event.target.name} | value: ${event.target.value}`)

    setData({
      [event.target.name] : event.target.value
    })
  }

  return <React.Fragment>
    <FormControl className={classes.formControl} variant="outlined">
      <InputLabel>Tipo 1</InputLabel>
      <Select label='Tipo' value={data.fieldType} inputProps={{ name: 'fieldType', id: 'tipo 1' }} onChange={handleChange}>
        <MenuItem disabled value="">
          <em>Seleccione</em>
        </MenuItem>
        {types.map((v, i) => (
          <MenuItem key={i} id='tipo 1' value={v.id}>{v.value}</MenuItem>
        ))}
      </Select>
    </FormControl>
  </React.Fragment>
}
export default Hello
2
  • Diste totalmente en el clavo, pero cabe aclarar que el currentTarget hace referencia al id seteado dentro del componente </MenuItem>, no dentro del Select. Commented el 9 jun. 2020 a las 16:38
  • Cierto! Respuesta editada, gracias :)
    – Gonzalo-GC
    Commented el 9 jun. 2020 a las 16:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.