Tengo una página de búsqueda, something/search?q=foo , cada vez que estoy en esta página quiero poner foo en la etiqueta de valor de mi formulario. (No para fines de búsqueda, tengo una barra de búsqueda en pleno funcionamiento, solo quiero mostrarle al cliente lo último que buscó).
Obtuve el término de búsqueda con: (window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : '' , esto funciona, aunque al ponerlo en la etiqueta de valor de formularios, reaccionar bloquea inmediatamente, no deja me escriba cualquier cosa en el campo de entrada. Creo que esto se debe a que se actualiza a esta cadena súper rápido y no ves que suceda.
¿Cómo lograría esto, para actualizar el valor de mi formulario una vez y eso es todo?
Aquí está mi código simplificado:
<input type="search" name="q" id="q" value={(window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : ''} <--- This is where I want to put the search stringLo que he probado hasta ahora es esto:
this.state = { value:'' } ... handleTitle = (s) => { this.setState({value:s}) } ... <input ... value={this.state.value} onChange={this.HandleTitle((window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : '')}esto da como resultado infinitas actualizaciones de estado
Le sugiero que obtenga el valor del parámetro de búsqueda cuando se monte el componente y lo almacene en el estado local del componente. Luego lea/actualice el valor del estado. Algo como:
const [search, setSearch] = useState(""); useEffect(() => { setSearch(new URLSearchParams(new URL(window.location.href).search).get('q')); }, []); return ( <intput type="text" value={search} onChange={e => setSearch(e.target.value)} /> );No lo he probado, pero entiendes la esencia.
Sería más fácil proporcionar una respuesta más concreta si comparte el código o la esencia
De todas formas si quieres acceder a la q de forma nativa. Ejemplo de trabajo https://8zwht.csb.app/?q=test
import React from "react"; import "./styles.css"; class App extends React.Component { state = { value: "" }; componentDidMount() { const search = new URL(window.location).searchParams; const term = search.get("q"); if (term) this.setState({ value: term }); } handleChange = (e) => { this.setState({ value: e.target.value }); }; render() { return ( <input type="text" onChange={this.handleChange} value={this.state.value} /> ); } } export default App;