2

Lo que quiero es hacer es un contador, que dependiendo de si pulso + me sume, que dependiendo de si pulso - pues me reste, eso ya lo hice, pero como esta dentro de un input quiero editar ese valor que lleve, y no puedo editarlo.

Ejemplo:

introducir la descripción de la imagen aquí


  const [cantidad, setCantidad] = useState(1);

  const sumar = () => {
    setCantidad(cantidad + 1);
  };
  const restar = () => {
    setCantidad(cantidad - 1);
  };


<button style={Mystyle.btn} onClick={restar}>
  -
</button>
<input
    className="text-center"
    type="number"
    style={Mystyle.input}
    value={cantidad}
    
    />

<button style={Mystyle.btn} onClick={sumar}>
 +
</button>

1 respuesta 1

3

La problemática que planteas se puede solucionar agregando el evento onChange del elemento input, a ese evento le podrías pasar una función que se encargue de modificar el state de tu componente, en este caso tu contador.

Quedaria algo asi:

const MyComponent = () => {
  const [cantidad, setCantidad] = React.useState(1);

  const sumar = () => {
    setCantidad((cantidad) => cantidad + 1);
  };
  const restar = () => {
    setCantidad((cantidad) => cantidad - 1);
  };

  const onChangeValue = (e) => {
    setCantidad((cantidad) => parseInt(e.target.value));
  };

  return (
    <React.Fragment>
      <button onClick={restar}>-</button>
      <input
        className="text-center"
        type="number"
        value={cantidad}
        onChange={onChangeValue}
      />

      <button onClick={sumar}>+</button>
    </React.Fragment>
  );
};
2
  • Muchas gracias @JesusOchoa saludos. Commented el 14 ago. 2020 a las 22:35
  • @MairaAlejandraQuintero Si la solución propuesta propuesta te sirvió, entonces aceptala y votala para arriba. Al mismo tiempo esto le indica a otros usuarios de que es una respuesta válida para el problema que planteaste.
    – Juan Marco
    Commented el 15 ago. 2020 a las 20:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.