en el Código a continuación, estoy tratando de usar Link. El problema es que el primer elemento de enlace funciona, mientras que el segundo elemento de enlace dentro del mapa no funciona. No hace nada al hacer clic en él. Busqué mucho en diferentes sitios web, pero no pude encontrar una razón por la que ese sea el caso. ¿Alguien puede explicarme por qué esto es así y si hay una solución a mi problema?
return ( <div> <p><Link to='/test'>Testlink</Link></p> <div className={style.searchBarContainer}> <input className={style.searchBar} type="text" placeholder={placeholder} onChange={handleChange} onFocus={handleFocusIn} onBlur={handleFocusOut}/> <div className={style.searchIcon}><i className="search icon"></i></div> </div> <div className={style.dataWindow}> {searchInput.map((value, key) =>{ return( <div className={style.dataItem} key={value.id}> <p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p> </div> ); })} </div> </div> )Gracias por adelantado
Alexej
Debe usar el elemento Enlace en el nivel superior al menos para proporcionar un área de acceso mucho más amplia para hacer clic:
return ( <div> <p><Link to='/test'>Testlink</Link></p> <div className={style.searchBarContainer}> <input className={style.searchBar} type="text" placeholder={placeholder} onChange={handleChange} onFocus={handleFocusIn} onBlur={handleFocusOut}/> <div className={style.searchIcon}><i className="search icon"></i></div> </div> <div className={style.dataWindow}> {searchInput.map((value, key) =>{ return( <Link to='/test' key={value.id}> <div className={style.dataItem}> <p>{value.last_name}, {value.first_name}</p> </div> </Link> ); })} </div> </div> )Su código está funcionando aquí en mi CodeSandbox . El problema debe estar en otro lado.
Encontré mi error: La función handleFocusOut, que se ejecuta en Blur, se usó para ocultar la ventana en la que está el enlace que quería seleccionar. El onBlur se ejecutó antes que el elemento Enlace, ocultó la ventana y, por lo tanto, no sucedió nada después de hacer clic en el enlace. Ahora estoy pausando la función handleFocusOut durante 100 ms para que el enlace se ejecute primero y ahora funcione. Sé que esta no es la mejor solución, pero es la única que funcionó hasta ahora. Buscaré uno mejor. Gracias a todos por ayudarme :)