0

buen dia, tengo un campo input numérico donde al darle en flechas del mismo campo me deja llegar hasta el numero 45 pero si coloco manual un numero mayor a 45 me lo esta dejando hacer.

Lo que necesito es que solo me permita escribir números que no sean mayor a 45 y que no sean menor a 0.

import React from 'react'

function Pruebas(props) {
  return (
    <div>
      <input type="number" placeholder="Minutos por tiempo" className="form-control"  min = "1" max= "45" 
   name="minutos_juegos"
   value={props.getState('minutos_juegos', '')} 
   onChange={props.handleChange} />
      
    </div>
  )
}

export default Pruebas

2 respuestas 2

1

Te recomiendo pasar el valor de los minutos a un useState, y no aplicarlo directamente en el value del input. De esta manera, tienes más control sobre el estado, puedes utilizarlo en validaciones y además es más legible.

Dicho esto, entonces

const Pruebas = () => {      
  const [minutes, setMinutes] = useState(0)

  useEffect(() => {
    if (minutes && (+minutes < 0 || +minutes > 45)) setMinutes(0)
  }, [minutes])

  const handleChange = ({ target: { value } }) => setMinutes(value);

  return (
    <div className="App">
      <input
        type="number"
        placeholder="Minutos por tiempo"
        className="form-control"
        min="1"
        max="45"
        name="minutos_juegos"
        value={minutes}
        onChange={handleChange}
      />
    </div>
  );
}

De esta manera, cada vez que el estado de minutes cambie, validará si el valor cumple la condición, y en caso de no hacerlo, lo setea a 0.

PD: Simule los minutos como valor directo en el state, ya que ignoro que hace tu getState(), pero sería sólo ajustar eso.

Nos comentas

6
  • aparece un error señalando const [minutes, setMinutes] = useState(minutes), donde aparece el primer "minutes", mensaje error "minutes' has already been declared"
    – Giovanny
    Commented el 6 dic. 2021 a las 16:33
  • Cambia el nombre del useState. Te da error por ambigüedad Commented el 6 dic. 2021 a las 16:57
  • ya agregue minutos como lo muestra en la posible solución pero ahora cuando coloco un valor mayor a 45 en el campo no hace nada , me esta dejando colocar cualquier valor mayor a 45
    – Giovanny
    Commented el 6 dic. 2021 a las 18:10
  • Ojo, que en la respuesta te coloque un postdata Lo más probable es que como estás usando un getState para obtener los minutos, no te este funcionando por eso. Debes adaptar la respuesta a la forma en que tú la estás implementando, porque acá funciona correctamente Commented el 6 dic. 2021 a las 18:18
  • estoy probando en un archivo independiente la respuesta y no esta funcionando
    – Giovanny
    Commented el 6 dic. 2021 a las 18:21
0

Podrías pasar el código completo? Con el state y el handleChange?

Podrías hacer en el handle un if, creo que en el onChange actualizas el state por lo que podrías poner un if, indicando que si el valor del state es mayor a 45 haga un set del state a 45, sino que haga un set del state pasándole el event.target.value.. podrías resolverlo dentro del mismo onChange con un operador ternario..

Aparentemente el handleChange lo estás recibiendo por props desde un componente padre, en el es que setearías lo que querés que pase al cambiar el valor del input..

Es necesario un poco más de info para entender lo que intentas hacer o como lo estás intentando.

3
  • no tengo nada en el handleChange .
    – Giovanny
    Commented el 6 dic. 2021 a las 12:50
  • como seria con el if ?
    – Giovanny
    Commented el 6 dic. 2021 a las 12:53
  • como seria con el if o el operador ternario?
    – Giovanny
    Commented el 6 dic. 2021 a las 14:38

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.