0
163
Views¿Cómo obtengo los parámetros de búsqueda para agregar a la URL al enviar, no al cambiar?
El formato de la URL es el siguiente:
www.url.com/palabra clave="_____"
Sin embargo, la parte ____ de la URL comienza a completarse incluso antes de enviar el formulario. También funciona en el envío, pero noté en mi consola que cada letra se registra. Infiero que se debe a que mi entrada está configurada en onChange en lugar de onSubmit, pero después de cambiarlo onSubmit, ya no funciona.
La palabra clave también permanece después de actualizar la página en lugar de volver a la URL base original sin parámetros, ¿cómo puedo solucionar esto?
1 answers
Answer question0
La razón por la que la URL queryString se actualiza tan pronto como escribe la entrada es porque está actualizando los parámetros de búsqueda en el controlador onChange de la entrada.
Si solo desea actualizar queryString cuando se envía el formulario, este es el controlador que se debe usar para actualizar los parámetros de queryString.
- Elimine
setSearchValue({ keyword: evt.target.value })del controladoronChangedeinput. - Agregar
setSearchParams({ keyword: keywords });al controladoronSubmitdelform. - Restablezca/borre los parámetros de búsqueda en
useEffectcuando se monte el componente.
Código:
const SearchBox = ({ onSubmit: onSubmitCallback, searchBoxLabel, searchBoxPlaceholder, searchBoxButtonText, searchBoxHeader, searchBoxDescription, listingType }) => { const dispatch = useDispatch(); const keywords = useSelector((state) => state.searchReducer.Keywords); const [searchParams, setSearchParams] = useSearchParams(); useEffect(() => { setSearchParams(); // <-- clear the search params on component mount }, []); const handleSubmit = (e) => { e.preventDefault(); onSubmitCallback(keywords); setSearchParams({ keyword: keywords }); // <-- set search params dispatch(setFilters([])); // clear all checkboxes document .querySelectorAll("input[type=checkbox]") .forEach((el) => (el.checked = false)); }; return ( <div className={....}> ... <form className="search-banner__form" onSubmit={handleSubmit}> <div className="search-banner__keyword-input-group"> ... <input ... onChange={(evt) => { dispatch(setKeywords(evt.currentTarget.value)); // <-- only update keywords }} /> </div> <button ... type="submit"> {searchBoxButtonText} </button> </form> </div> ); }; 