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.

Desactivando el botón en React JS

04 Aug, 2023 Programación

Aquí está el código para desactivar el botón. No entiendo por qué el botón no está desactivado. Por favor, ayúdame a encontrar dónde salió mal.

import { useState } from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleDisable = (e) => {
    setValue(e.target.value);
  };

  return (
    <div classname='App'>
      <h1>Hello CodeSandbox</h1>
      <h3> Desactivar Botón</h3>
      <input type='text' onchange="{handleDisable}" value="{value}">
      <button disabled="{value.length" <="" 1}="">
        Enviar
      </button>
    </div>
  );
};

export default App;
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En el código proporcionado, la función handleDisable solo actualiza el estado del valor con el valor de entrada, pero no hace nada para desactivar el botón.

    Para deshabilitar el botón en función de la longitud del valor de entrada, el atributo “disabled” debe establecerse en un booleano que se evalúa como verdadero cuando la longitud del valor de entrada es menor que 1.

    El código corregido sería:

    import { useState } from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div classname='App'>
      <h1>Hello CodeSandbox</h1>
      <h3>Disable Button</h3>
      <input type='text' onchange="{handleInputChange}" value="{value}">
      <button disabled="{value.length" <="" 1}="">Submit</button>
    </div>
  );
};

export default App;

    Con este cambio, el botón se deshabilitará cuando la longitud del valor de entrada sea menor que 1.

Comments are closed.