Tengo un formulario con una sola entrada que es una consulta de la URL de búsqueda:
<form className={styles.searchInputContainer} role="search" action="/search"> <label htmlFor={id} className={styles.searchLabel}>{constants.search}</label> <input id={id} className={styles.searchInput} type="search" name="q" placeholder="Search..." autocomplete="off" /> </form>En este momento, cuando presiono Intro, la URL terminará con '/buscar?q= lo que sea_la_entrada_es '
Actualmente estoy haciendo lógica en otra parte del archivo para verificar si la barra de búsqueda está en una página en particular. Con este valor booleano ( isShoppingPage ), quiero agregar opcionalmente un 'tipo = tienda' a la URL cuando el usuario presiona Intro para que automáticamente solo busque en las categorías de la tienda. Intenté agregar 'type = shop' al valor de entrada, pero luego la URL termina teniendo una codificación de URL. Estoy confundido sobre cómo agregar esto condicionalmente sin cambiar el name="q" que la entrada tiene y necesita actualmente.
En lugar de action , puede usar onSubmit prop del form .
import React, {useState} from 'react'; const Form = (props) => { const {styles, id, constants} = props; const [qValue, setQValue] = useState(""); const handleSubmit = (e) => { e.preventDefault(); // here you can make API call with q=qValue and type=shop }; return ( <form className={styles.searchInputContainer} role="search" onSubmit={handleSubmit}> <label htmlFor={id} className={styles.searchLabel}>{constants.search}</label> <input id={id} className={styles.searchInput} type="search" name="q" placeholder="Search..." autocomplete="off" value={qValue} onChange={e => setQValue(e.target.value)} /> </form> ) };Esta es una guía de los documentos de reacción.