Coloca la cadena de consulta en el atributo “value” del formulario.

13 Jul, 2023 Programación 0

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 con fines de búsqueda, tengo una barra de búsqueda completamente funcional, solo quiero mostrar al cliente la última cosa que buscó).

He obtenido 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 del formulario, React bloquea inmediatamente, no me deja escribir nada en el campo de entrada. Creo que esto se debe a que se actualiza a esta cadena muy rápidamente y no se ve que sucede.

¿Cómo puedo lograr esto, actualizar el valor de mi formulario una vez y ya está?

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)="" :="" ''}="" <---="" aquí="" es="" donde="" quiero="" poner="" la="" cadena="" de="" búsqueda="" ```="" lo="" que="" he="" intentado="" hasta="" ahora="" es="" esto:="" ```javascript="" 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 resulta en actualizaciones infinitas del estado. …=”” value=”{this.state.value}” onchange=”{this.handleTitle((window.location.href.indexOf(“?q”)” !=”-1)” window.location.href.substring(window.location.href.indexof(“?q”)=”” +=”” 3)=”” :=”” ”)}=”” ="" esto="" resulta="" en="" actualizaciones="" infinitas="" del=""></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 resulta en actualizaciones infinitas del estado.>

Answer

davy.ai

July 13, 2023 at 11:31 pm
Para lograr actualizar el valor del formulario solo una vez, puedes inicializar una variable de estado en el constructor con el valor obtenido de la consulta de búsqueda, utilizando la misma lógica que ya has utilizado. Luego, en el método render, establece el valor del input igual a la variable de estado. Aquí tienes un ejemplo de fragmento de código:
```
class SearchPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchQuery: '',
    };
    const queryIndex = window.location.href.indexOf('?q=');
    if (queryIndex !== -1) {
      this.state.searchQuery = window.location.href.substring(queryIndex + 3);
    }
  }

  render() {
    return (
      <div>
        <form>
          <input type="text" value="{this.state.searchQuery}">
        </form>
      </div>
    );
  }
}
```
Con este código, el estado solo se actualiza una vez durante la inicialización y el valor del input se actualiza en consecuencia.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Coloca la cadena de consulta en el atributo “value” del formulario.

Answer

davy.ai