React随机数生成器input type number数值跳转异常问题排查

这个问题我之前也碰到过，核心原因是你没有将number输入框的字符串值转换为数字就存入state，导致state里的minNum和maxNum混合了字符串和数字类型，进而触发了非预期的比较结果。

具体分析你的场景： #

1. 初始state中minNum和maxNum是数字类型（0和100）。
2. 当你通过输入框箭头修改数值时，event.target.value返回的是字符串类型（比如你输入10，得到的是"10"而不是10），你直接把这个字符串存入state，此时minNum/maxNum变成了字符串。
3. 当进行数值比较时（比如event.target.value < minNum），JS会按字符串规则对比：
   • 比如你把max调到100（得到字符串"100"），此时minNum是字符串"11"，字符串对比时会逐个字符比较："100"的第二个字符是"0"，而"11"的第二个字符是"1"，所以"100" < "11"会被判定为true，触发setState({ maxNum: minNum })，也就是把max设为11，这就是你看到的跳转现象。
   • 同理，当min被调到一位数字符串（比如"9"），如果此时maxNum是字符串"99"，后续的比较逻辑也会因为字符串规则出现非预期结果。

解决方案：统一转换为数字类型 #

在处理输入框的change事件时，先把event.target.value转换为数字，确保state里的minNum和maxNum始终保持数字类型。

修改你的Generator组件中的两个change方法：

1. 修改minRangeInputChange方法

minRangeInputChange = (event) => {
  // 将输入值转换为数字，处理空值情况
  const inputValue = Number(event.target.value);
  if (isNaN(inputValue)) return;

  const { maxNum } = this.state;
  if (inputValue > maxNum) {
    this.setState({ minNum: maxNum }, () => {
      console.log(this.state.minNum); // setState是异步的，用回调获取最新值
    });
  } else {
    this.setState({ minNum: inputValue }, () => {
      console.log(this.state.minNum);
    });
  }
}

2. 修改maxRangeInputChange方法

maxRangeInputChange = (event) => {
  const inputValue = Number(event.target.value);
  if (isNaN(inputValue)) return;

  const { minNum } = this.state;
  if (inputValue < minNum) {
    this.setState({ maxNum: minNum }, () => {
      console.log(this.state.maxNum);
    });
  } else {
    this.setState({ maxNum: inputValue }, () => {
      console.log(this.state.maxNum);
    });
  }
}

额外注意点： #

• setState是异步操作，直接在setState后console.log state值会拿到旧值，建议用setState的回调函数获取最新状态。
• 加入isNaN判断可以处理输入框为空的情况，避免把NaN存入state导致后续逻辑出错。

内容的提问来源于stack exchange，提问作者Alon Joshua