Anteriormente estaba en v4 y tenía mi configuración Select y MenuItems así:
const [select, setSelect] = useState(''); const [customName, setCustomName] = useState(''); const handleChange = (event) => { setSelect(event.target.value); setCustomName(event.currentTarget.getAttribute('name')); }; ... <Select label="Choose A Dataset" onChange={handleChange} value={select} > {tables && tables.map( (table, index) => ( <MenuItem key={table.name} value={table.code} name={table.name} > {table.name} </MenuItem> ) )} </Select>y pude acceder al atributo de nombre de menuItem a través de
event.currentTarget.getAttribute('name');Sin embargo, después de la migración a v5, event.currentTarget devuelve un valor nulo. ¿Alguna sugerencia?
SelectInput tiene esta definición onChange :
onChange?: (event: SelectChangeEvent<T>, child: React.ReactNode) => void; lo que significa que puede hacer clic en el niño como el segundo parámetro en su handleChange . Aquí puede acceder a la propiedad de nombre con child.props.name .
Sin embargo, vale la pena señalar que MenuItem no tiene un accesorio de nombre y, si lo define, Typescript lo resaltará como un error. Para evitar esto, puede usar event.target.value para encontrar la tabla con el code coincidente y obtener el nombre de esa manera:
const name = tables.find((table) => table.code === event.target.value).name;