输入texbox值在文本框javascript中不起作用

Question

我想知道如何基于在文本框中输入的最小值来允许最大值，并且应该只允许数字，不能包含特殊字符和字母，

我有两个文本框，最小值和最大值，min只能使用正数和负数，但不允许使用特殊字符和字母]

max值应大于最小值，并且不允许使用特殊字符和字母

这里是我的代码，最大不能正常工作。

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

请检查我使用regular expression仅输入正/负数的示例。

Here is the Code Sand Box

Answer 2

即使您的max输入小于状态中的min，您也要设置状态。