Tengo una pregunta sobre onChange, así que estaba tratando de recoger y enviar un valor de mi onChange a (''http://localhost:3000/search''), pero cuando presiono la tecla (Enter) aparece ingresa a la página pero termina eliminando los valores de mi onChange volviendo indefinido, ¿hay alguna forma de guardar mi onChange y enviarlo a otra página? sin retonarme indefinido
Mi código:
function handleKeyPress(event: any) { if(event.keyCode === 13){ open('http://localhost:3000/search') } } function search(e: any) { axios.get("http://localhost:3001/search", {params: {q: e.target.value}}) } return( <> <div className={styles.Header}> <input name='q' type="text" placeholder='Buscar' onChange={(e)=>search(e)} onKeyDown={(e)=>handleKeyPress(e)}/> <div></div> </div> </> )Use setTimeout porque es posible que la función de búsqueda aún no esté cargada
setTimeout(open('http://localhost:3000/buscar'), 500)
Si desea usar window.open , esta respuesta debería ayudar.
De lo contrario, le sugiero que use useNavage de react-router. Puede pasar su parámetro de búsqueda en la propiedad de búsqueda y acceder al parámetro en la página de destino usando useParams .
import { useNavigate, createSearchParams } from "react-router-dom"; ... const navigage = useNavigate() function handleKeyPress(event: any) { if(event.keyCode === 13){ navigage( `${"/search"}?${createSearchParams({q: e.target.value})}` ); } } ...en la página "/buscar"
let { q } = useParams();Aquí cómo configurar el enrutador de reacción para su proyecto