Estoy tratando de excluir menos y más de la entrada, pero sale mal:
handleChange(event) { const value = event.target.value.replace(/\+|-/ig, ''); this.setState({financialGoal: value}); }Procesar código de entrada:
<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>Traté de imitar su código y noté que hay un problema en React con <input type='number' /> . 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:
<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />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.
Simplemente camino en React
<input onKeyPress={(event) => { if (!/[0-9]/.test(event.key)) { event.preventDefault(); } }} />una línea de código
<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>