En ReactJS, el evento onClick no funciona en el navegador Google Chrome pero funciona bien en Firefox. Cuando agrego el evento onClick con la función de flecha en la etiqueta de opción dentro de la selección , no funciona en ninguna situación en Google Chrome.
<select> {data.map( (item) => { return( <> <option onClick={()=>alert('Test')} value={item.name} key={item.id}>{item.name}</option> </> ) })} </select>De hecho, necesito llamar a una función de flecha ES6 con algún parámetro dentro de la etiqueta de opción
<select> {data.map( (item) => { return( <> <option onClick={()=>LoadNew(item.id)} value={item.name} key={item.id}>{item.name}</option> </> ) })} </select>Esto funciona bien en Firefox pero no funciona en el navegador Google Chrome. ¿Alguna idea de cómo puedo solucionar este problema?
Debe pasar el prop onChange a la etiqueta de select , y desde allí puede acceder al valor.
Actualizar:
Si desea acceder a todos los datos, debe usar JSON.
<select onChange={(e) => { console.log(JSON.parse(e.target.value)); }} > {data.map((item) => { return ( <> <option value={JSON.stringify(item)} key={item.id}> {item.name} </option> </> ); })} </select>Así que se me ocurrió un enfoque de fuerza bruta. ya que necesita pasar la identificación del elemento a una función LoadNew
export default function App() { let data = [ { name: "Love", id: 1 }, { name: "labs", id: 2 } ]; return ( <div className="App"> <select onChange={(e) => { let item= data.filter((val) => val.name == e.target.value); LoadNew(item.id) }} > {data.map((item) => { return ( <> <option value={item.name} key={item.id}> {item.name} </option> </> ); })} </select> </div> ); }Puede obtener el valor seleccionado colocando un detector de eventos onChange en la etiqueta de selección. Luego filtramos los datos para obtener el elemento específico, después de pasar la identificación del elemento a la función.