ReactJS - How to allow user to type only integers

Question

I'm trying to make if else statement to allow user to type only integer in TextArea but i have no idea how. This is my code:

class App extends React.Component {

constructor(props) {
    super(props)

    this.state = {
        currencyValue: '',
        currencyCode: 'USD',
        result: ''
    }
}

handleChangeCurrencyValue(event) {
    console.log('qwer ' + this)
    this.setState(Object.assign({}, this.state, {currencyValue: event.target.value}))
}

handleChangeCurrencyCode(event) {
    console.log('qwer ' + this)
    this.setState(Object.assign({}, this.state, {currencyCode: event.target.value}))
}

calculate(event){
    var obj = this 
    axios.get('http://localhost:8080/Currency/currency?currencyCode=' + this.state.currencyCode + '&currencyValue=' + this.state.currencyValue + '&responseType=json')
    .then(function(resp){
        console.log('RESULT: ', resp.data.result)
            obj.setState(Object.assign({}, obj.state, {result: resp.data.result}))
    })
    .catch(error => {
        console.log(error)
    });
}

render() {
    return (
        <div>
            <TextArea functionChangeValue={this.handleChangeCurrencyValue.bind(this)} value={this.state.currencyValue} />
            <ComboBox functionChangeCode={this.handleChangeCurrencyCode.bind(this)} value={this.state.currencyCode} />
            <p>
                <button onClick={this.calculate.bind(this)}>Calculate</button>
            </p>
            <div>{this.state.result}</div>
        </div>
    );
}

}

class TextArea extends React.Component {

render() {
    return (
        <div>
            <h4>
                <div>Type value you want to exchange: </div>
                <input type='text' onChange={this.props.functionChangeValue}/>
                 {/* <div>Value of your currency is: {this.props.value}</div> */}
            </h4>
        </div>
    );
}

}

class ComboBox extends React.Component {

render() {
    return(
        <div>
            <h4>
                <div>Select your currency:</div>
                <select onChange={this.props.functionChangeCode}>
                <option>USD</option>
                <option>EUR</option>
                <option>GBP</option>
                </select>
                {/* <div>Your currency is: {this.props.value}</div> */}
            </h4>
        </div>
    );
}

}

export default App;

Can you give me idea or some example?

Answer 1

You can use regex and conditionally change state.

   onChange(event){
      const regex = /^[0-9\b]+$/;
      const value = event.target.value;
      if (value === '' || regex.test(value)) {
         this.setState({ value })
      }
   }

Answer 2

Consider making use of the ValidatorJS Library as opposed to rolling your own validation method.

Example usage in your code would be something like this...

handleChangeCurrencyValue(event) {
    console.log('qwer ' + this)
    const currencyValue = event.target.value;

    if(validator.isInt(currencyValue)) {
        this.setState({ currencyValue });
    }
}

I recommend using libraries that have been thoroughly tested for validation as this will reduce security concerns down the line. Also, validator is extremely easy to implement.

Answer 3

can it be something like that: <input type="number" min="0" step="1"/>

Answer 4

You can use regex (regular expression) to handle that. The regex that you use is /[0-9]+/g.

For example you have input:

<input value={this.state.value} onChange={this.onChange}/>

And the onChange:

  onChange(text) {
    let newText = '';
    const numbers = '^[0-9]';
    for (let i = 0; i < text.length; i++) {
      if (numbers.indexOf(text[i] > -1)) {
        newText += text[i];
      }
      this.setState({ currencyValue: newText });
    }
  }

or like this:

onChange(e){
    const re = /^[0-9\b]+$/;
    if (e.target.value == '' || re.test(e.target.value)) {
        this.setState({currencyValue: e.target.value})
    }
  }

May it can help you! :)