input texbox value not working in textbox javascript

Question

I would like to know how to allow max value based on min entered in textbox and should allow only numbers and no special characters and alphabets,

I have two text box, min and max, min can allow only numbers both positive and negative but no special characters and alphabets

max value should be greater than min value and not allow special characters and alphabets

Here is my code, max not working proper.

class Sample extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      min: "",
      max: ""
    }
 }
hanldeMin = (e) => {
    if (e.target.value !== "") {
      this.setState({
        min: e.target.value
      })
    }
  }

 handleMax = (e) => {
    if (e.target.value !== "") {
      if (parseInt(e.target.value) < parseInt(this.state.min)) {
        e.target.value = "";
      }
      this.setState({
        max: e.target.value
      })
    }
  }
render(){
return (
 <React.Fragment>
   <div className="row">

       <div className="col-lg-5 col-sm-5 noPadding noMargin">
                <input
                  type="text"
                  placeholder="min"
                  className="form-control"
                  id="minavlitems"
                  value={this.state.min}
                  onChange={(event) => {
                    if (isNaN(Number(event.target.value))) {
                      return;
                    } else {
                      this.hanldeMin(event);
                    }
                  }}
                />
              </div>
              <div className="col-lg-1 col-sm-1 alignCenter noPadding noMargin">
                <b>-</b>
              </div>
              <div className="col-lg-6 col-sm-6 noPadding noMargin">
                <input
                  type="text"
                  min={this.state.min}
                  className="form-control"
                  placeholder="max"
                  id="maxavlitems"
                  value={this.state.max}
                  onChange={(event) => {
                    if (isNaN(Number(event.target.value))) {
                      return;
                    } else {
                       this.hanldeMax(event);
                    }
                  }}                 
                />
              </div>
             </div>
   </div>
 </React.Fragment>

)

}

}

Answer 1

Please check the example where I used regular expression to input only positive/negative number.

Here is the Code Sand Box

Here is the example:

import React from "react";

export default class Sample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            min: "",
            max: ""
        }
    }

    isValid = (e) => {
        let regEx = /^-?\d*\.?\d{0,6}$/;
        let text = e.target.value;
        return (text.match(regEx) !== null);
    };

    handleMin = (e) => {
        if (this.isValid(e)) {
            this.setState({
                min: e.target.value
            })
        }
    };

    handleMax = (e) => {
        console.log(e.target.value, 'onblur');
        if (this.isValid(e)) {
            if (parseInt(e.target.value) <= parseInt(this.state.min)) {
                e.target.value = "";
            }
            this.setState({
                max: e.target.value
            })
        }
    };

    handleChange = (e) => {
        this.setState({
            max: e.target.value
        })
    };

    render() {
        return (
            <React.Fragment>
                <div className="row">
                    <div className="col-lg-5 col-sm-5 noPadding noMargin">
                        <input
                            type="text"
                            placeholder="min"
                            className="form-control"
                            id="minavlitems"
                            value={this.state.min}
                            onChange={this.handleMin}
                        />
                    </div>
                    <div className="col-lg-1 col-sm-1 alignCenter noPadding noMargin">
                        <b>-</b>
                    </div>
                    <div className="col-lg-6 col-sm-6 noPadding noMargin">
                        <input
                            type="text"
                            min={this.state.min}
                            className="form-control"
                            placeholder="max"
                            id="maxavlitems"
                            value={this.state.max}
                            onChange={this.handleChange}
                            onBlur={this.handleMax}
                        />
                    </div>
                    <button onClick={() => {
                        console.log(this.state, 'state')
                    }}>Show mix and max value in console
                    </button>
                </div>
            </React.Fragment>
        )
    }
}

Answer 2

You are setting the state even your max input is less than min in state.

Change your if condition as follows

handleMax = (e) => {
    if (e.target.value !== "") {
      if (parseInt(e.target.value) > parseInt(this.state.min))
         this.setState({
           max: e.target.value
         })
     }
  }