es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo deshabilitar un botón en React JS si el campo de entrada está vacío?

10 Jun, 2023 Programación

Código de React:

import { useState } from "react";

export default function IndexPage() {
  const [text, setText] = useState("");

const autoComplete = (e) => {
    setText({ value: e.target.value });
  };

return (
    <form>

<pre><code>  <input type="text" placeholder="buscar aquí" onChange={autoComplete} />

  <button type="submit" disabled={!text}> encontrar </button>

</form>
</code></pre>

);
}

Enlace de SandBox: https://codesandbox.io/s/practical-panini-slpll

Problema:

Cuando se carga la página, el botón encontrar está desactivado al principio porque el campo input está vacío, lo cual es bueno. Pero,

Ahora, cuando empiezo a escribir algo y luego lo elimino todo con la tecla backspace, el botón encontrar no se desactiva de nuevo.

Quiero:

Solo quiero que mi botón encontrar esté desactivado si el campo de entrada está vacío

¿Dónde me equivoco?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Necesitas actualizar la función autoComplete para establecer el estado de text con el valor del campo de entrada en lugar de establecerlo en un objeto con una propiedad value. Esto se puede hacer usando e.target.value directamente. Además, agrega una verificación para ver si el valor del campo de entrada está vacío y deshabilita el botón en consecuencia.

    import { useState } from "react";

export default function IndexPage() {
  const [text, setText] = useState("");

  const autoComplete = (e) => {
    setText(e.target.value);
  };

  return (
    <form>

      <input type="text" placeholder="buscar aquí" onchange="{autoComplete}">

      <button type="submit" disabled="{!text}"> buscar </button>

    </form>
  );
}

Comments are closed.