const handleChange = (e) => { console.log(e.target.id); }; return ( <div> <select onChange={(e) => handleChange(e)}> <option value="1-10" id="foo"> 1-10 </option> ¿Cómo puedo hacer que el id prop en la etiqueta <option> sea accesible mediante el código anterior? e.target.id no devuelve nada, pero e.target.value devuelve el valor seleccionado. ¿Cómo puedo crear estos atributos personalizados cuando uso elementos html de vainilla?
Uno de los métodos más fáciles para lograr esto es el siguiente:
const handleChange = (e) => { const index = e.target.selectedIndex; const id = e.target.childNodes[index].id; console.log(id); // logs 'foo' or 'bar' depending on selection }; return ( <div> <select onChange={(e) => handleChange(e)}> <option value="1-10" id="foo"> 1-10 </option> <option value="11-20" id="bar"> 11-20 </option> </select> </div> );e.target es la select , no la option . Y dado que la select no tiene una id , no obtendrá nada. Una forma de lograr lo que quieres es hacerlo:
export default function App() { const handleChange = (e) => { const selectedOption = e.target.querySelector(`option[value='${e.target.value}']`); console.log(selectedOption.id); }; return ( <select onChange={(e) => handleChange(e)}> <option value="1-10" id="foo"> 1-10 </option> <option value="1-11" id="bar"> 1-11 </option> </select> ); }Aquí hay otra manera de hacerlo
import React from 'react'; const handleChange = (e) => { const index = e.target.selectedIndex; const el = e.target.childNodes[index] const option = el.getAttribute('id'); console.log(option) }; export function App(props) { return ( <div className='App'> <select onChange={(e) => handleChange(e)}> <option value="1-10" id="foo"> 1-10 </option> <option value="2-10" id="zoo"> 2-10 </option> </select> </div> ); }