Sólo números. Número de entrada en React

Ten en cuenta que en las ciencias informáticas un error casi siempere puede tener diversas resoluciones, de igual modo compartiremos lo más óptimo y eficiente.

Solución:

Traté de imitar tu código y noté que hay un problema en React con . Para solucionarlo, consulte este ejemplo y pruébelo usted mismo: https://codepen.io/zvona/pen/WjpKJX?editors=0010

Debe definirlo como entrada normal (tipo = ‘texto’) con patrón solo para números:

Y luego para comparar la validez de la entrada:

const financialGoal = (evt.target.validity.valid) ? 
  evt.target.value : this.state.financialGoal;

La mayor advertencia sobre este enfoque es cuando se trata de dispositivos móviles -> donde el teclado no está en formato numérico sino en formato alfabético normal.

una línea de código

 this.setState(financialGoal: event.target.value.replace(/D/,''))/>

• Para dejar de escribir, utilice onKeyPress no onChange .

• Utilizando event.preventDefault() dentro onKeyPress significa DETENER el evento de presión.

• Ya que keyPress el controlador se activa antes onChangehay que comprobar lo pulsado key (event.keyCode), NO el valor actual de entrada (event.target.value)

  onKeyPress(event) 
    const keyCode = event.keyCode 
  

Demostración a continuación

const Component = React; 

class Input extends Component 
  

  onKeyPress(event) 
   const keyCode = event.keyCode 
  render() 
  
   return (
   

   )
  
 


ReactDOM.render( , document.querySelector('#app'));

valoraciones y comentarios

Tienes la opción de añadir valor a nuestro contenido añadiendo tu experiencia en las observaciones.

---

---

Utiliza Nuestro Buscador