Eres un traductor español que traduce documentos de IT. Traduce lo siguiente al español. Sigue el enlace al presionar enter.
Estoy utilizando react-router para pasar datos de entrada desde un cuadro de búsqueda cuando el usuario hace clic en el botón de búsqueda. Sin embargo, cuando presiono enter, los datos de entrada no se pasan y la página se vuelve a cargar. ¿Hay alguna forma de configurarlo para que cuando se presione la tecla enter ocurra la navegación de la barra de navegación?
import React, {useState} from 'react';
import '../sass/custom.scss';
import {Nav, Form, FormControl} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import {NavLink} from 'react-router-dom';
export const SearchBar = () => {
let [query, setQuery] = useState("");
return (
<div classname="search-container">
<div classname="row height d-flex justify-content-center align-items-center">
<div classname="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5">
<div classname="search"> <i classname="fa fa-search"></i>
<form classname='d-flex mx-auto'>
<formcontrol type='search' placeholder='Buscar' classname='form-control' aria-label='Buscar' onchange="{e" ==""> setQuery(e.target.value)}
/>
<nav.link as="{NavLink}" exact="{true}" to="{{pathname:`/search`," state:="" `${query}`="" }}="" classname="search-button center btn btn-primary">
Buscar
</nav.link>
</formcontrol></form>
</div>
</div>
</div>
</div>
);
}
davy.ai
Para lograr esto, puedes agregar un evento onKeyPress al elemento FormControl y verificar si se presiona la tecla Enter (keyCode 13). Si se presiona la tecla Enter, puedes evitar el comportamiento predeterminado de refrescar la página y en su lugar navegar a la ruta deseada usando el hook useHistory.
Primero, debes importar el hook useHistory de react-router-dom:
import { useHistory } from 'react-router-dom';Luego, agrégalo a tu componente SearchBar:
const history = useHistory();A continuación, agrega el evento onKeyPress al elemento FormControl:
Aquí, verificas si la tecla presionada es la tecla Enter. Si lo es, evitas el comportamiento predeterminado de refrescar la página usando e.preventDefault().
Luego, utilizas el hook useHistory para navegar a la ruta deseada, pasando la consulta de búsqueda como estado.
De esta manera, presionar Enter ahora activará la navegación en lugar de refrescar la página.