输入texbox值在textbox javascript中不起作用

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

我有两个文本框，最小值和最大值，

min

只能使用正数和负数，但不能使用特殊字符和字母

max

值应大于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>

)

}

}

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
最小：“，
马克斯：“
}
}
hanldeMin=（e）=>{
如果（例如，target.value！==“”）{
这是我的国家({
最小值：e.target.value
})
}
}
handleMax=（e）=>{
如果（例如，target.value！==“”）{
if（parseInt（e.target.value）
-
{
if（isNaN（编号（event.target.value）））{
回来
}否则{
这是hanldeMax（事件）；
}
}}                 
/>
)
}
}

您正在设置状态，即使您的

max

输入小于

min

处于状态

按如下方式更改您的if条件

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

---

请检查我使用

正则表达式

只输入正数/负数的示例

以下是示例：

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>
        )
    }
}

从“React”导入React；
导出默认类示例扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
最小：“，
马克斯：“
}
}
isValid=（e）=>{
设正则表达式=/^-？\d*\.？\d{0,6}$/；
设text=e.target.value；
返回（text.match（regEx）！==null）；
};
handleMin=（e）=>{
如果（本条有效（e））{
这是我的国家({
最小值：e.target.value
})
}
};
handleMax=（e）=>{
log（例如target.value，“onblur”）；
如果（本条有效（e））{
if（parseInt（e.target.value）{
这是我的国家({
最大值：e.目标值
})
};
render（）{
返回(
-
{
console.log（this.state，'state'）
}}>在控制台中显示混合和最大值
)
}
}

---

为什么要设置

e=“”

？非常感谢，但是当我输入最小值10时，最大值不能输入值。嗨，我已经更新了我的答案。现在它正在工作。请检查相同的问题，不能在最大值中输入值。请使用代码沙盒链接。它工作得非常好。我还添加了一张显示我可以输入值的图片。@kabir，但是当我输入最小值10时，最大值应该只允许大于10，但它是一个允许