Javascript 根据上次输入的值而不是当前值进行响应输入验证检查

我试图验证我的输入，如果数字在100和200之间，则应显示有效或无效，我遇到的问题是，它似乎在检查上次输入的值，例如，如果用户输入1222，这将显示valid，因为我相信它实际上是在检查最后输入的数字122，并且如果我随后删除2个字符，因此显示12，这也将显示valid。我相信这是因为状态是如何设置的，但我不确定如何正确地使其工作

我如何更改它，使其能够对照正确的值进行检查并正确验证

Textbox.js

class TextBox extends React.Component {
  state = {
    valid: '',
    value: ''
  }

  onChange = (event) => {
    this.props.onChange(event.target.value);
    this.validation()
  }

  validation() {
   (this.props.value > 100 && this.props.value < 200) ? this.setState({value: this.props.value}) : this.setState({value: this.props.value})
  }

  onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }
  render() {
    return (
      <Box
        invalid={!this.props.isValid}
      >
        <Label
          rollo={this.props.designation === 'rollo'}
          pleating={this.props.designation === 'pleating'}
        >{this.props.label}</Label>
          <span>
            <Input
              type={this.props.type && this.props.type}
              defaultValue={this.props.defaultValue}
              onChange={this.onChange}
              placeholder={this.props.placeholder}
              value={this.props.value || ''}
            />
          <Tooltip>{this.state.valid}</Tooltip>
        </span>
      </Box>
    );
  }
};

export default TextBox;

<TextBox
  type="number"
  label="Fenstertyp"
  defaultValue={ this.props.height / 100 * 66 }
  onChange={newValue => this.props.selectOperationChainLength(newValue)}
  tooltip="invalid"
  value={this.props.operationChainLength.value}
/>

export function selectOperationChainLength(operationChainLength) {
  return {
    type: SELECT_OPERATION_CHAIN_LENGTH,
    operationChainLength
  }
}

---

我认为首先需要将valid设置为false

state = {
valid: false,
value: ''
}

---

我认为首先需要将valid设置为false

state = {
valid: false,
value: ''
}

---

您可以将验证逻辑转换为event.target.value上的onChange方法，无需创建单独的方法。然后它会像这样

class文本框扩展了React.Component{
状态={
有效：假，
值：“”
}
onChange=（事件）=>{
常量值=event.target.value；
（value>100&&value<200）？this.setState（{value，valid:true}）：this.setState（{value，valid:false}）
this.props.onChange（值）；
}
onChangeInput（e）{
常量{name，value}=e.target；
这是我的国家({
[名称]：值
}，（）=>console.log（this.state.mail===this.state.confMail））；
}
render（）{
返回(
{this.props.label}
{this.state.valid}
);
}
};
导出默认文本框您可以在event.target.value上将验证逻辑转换为onChange方法，无需创建单独的方法。然后它会像这样


class文本框扩展了React.Component{
状态={
有效：假，
值：“”
}
onChange=（事件）=>{
常量值=event.target.value；
（value>100&&value<200）？this.setState（{value，valid:true}）：this.setState（{value，valid:false}）
this.props.onChange（值）；
}
onChangeInput（e）{
常量{name，value}=e.target；
这是我的国家({
[名称]：值
}，（）=>console.log（this.state.mail===this.state.confMail））；
}
render（）{
返回(
{this.props.label}
{this.state.valid}
);
}
};
导出默认文本框好的，这里有些地方出了问题

import React，{Component}来自“React”；
从“react dom”导入{render}；
类TextBox扩展组件{
建造师（道具）{
超级（道具）；
// 1.
//您只需要存储'isValid'属性。
//该值仅用于验证，对吗？
此.state={
isValid:false
}
}
onChange（e）{
常数{target}=e；
常量{value}=目标；
// 2.
//如果值在正确的范围内：isValid=true
//else:isValid=false
如果（值>100&&值<200）{
this.setState（{isValid:true}）；
}否则{
this.setState（{isValid:false}）；
}
}
render（）{
// 3. 
//总是使用解构。这更容易理解；）
const{type}=this.props；
const{isValid}=this.state；
返回(
这个.onChange（e）}
/>
{/* 4. */}
{/*为工具提示指定正确的文本*/}
{isValid？“valid”：“invalid”}

);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);





我简化了示例，以便更容易理解

好的，这里有些地方出了问题

import React，{Component}来自“React”；
从“react dom”导入{render}；
类TextBox扩展组件{
建造师（道具）{
超级（道具）；
// 1.
//您只需要存储'isValid'属性。
//该值仅用于验证，对吗？
此.state={
isValid:false
}
}
onChange（e）{
常数{target}=e；
常量{value}=目标；
// 2.
//如果值在正确的范围内：isValid=true
//else:isValid=false
如果（值>100&&值<200）{
this.setState（{isValid:true}）；
}否则{
this.setState（{isValid:false}）；
}
}
render（）{
// 3. 
//总是使用解构。这更容易理解；）
const{type}=this.props；
const{isValid}=this.state；
返回(
这个.onChange（e）}
/>
{/* 4. */}
{/*为工具提示指定正确的文本*/}
{isValid？“valid”：“invalid”}

);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);





我简化了示例，以便更容易理解

你的
验证
功能似乎有点奇怪，正如上面提到的答案一样。如果条件为true或false，则将状态设置为相同的值。另外，我也不知道是什么改变了你的
有效的
状态。
validation
会这样做吗？你的
validation
功能看起来很奇怪，就像上面提到的答案一样。如果条件为true或false，则将状态设置为相同的值。另外，我也不知道是什么改变了你的
有效的
状态。
validation
会这样做吗？如果我将状态更改为
valid:false
和`（this.props.value>100&&this.props.value<200）？this.setState（{value:this.props.value}）：this.setState（{value:！this.props.value}）`验证根本不会从false变为true。当条件满足时，您需要将valid设置为true。在您的情况下，如果（value>100&&value<200）{this.setState（{isValid:true}）；如果我将状态更改为
valid:false
和`（this.props.value>100&&this.props.value<200）？this.setStat