React组件OnChange事件未触发，IP正则验证代码失效求助

核心问题分析 #

1. 正则表达式错误：你写的正则/^(\d{1,3}.){3}\d{1,3}$/中，.是正则的通配符（匹配任意单个字符），不是字面量的点号，必须转义为\.才能正确匹配IP中的点。
2. 验证逻辑过于严苛：当前只有输入完全符合完整IP格式时才更新状态，但用户是逐步输入的（比如先输192，再输.，再输168），这些中间状态都不满足完整IP正则，所以setIPAddress从未执行，输入框始终绑定空状态，看起来完全没反应。

修复后的代码 #

import React, { useState } from "react";

function IP() {
  const [ipAddress, setIPAddress] = useState("");

  const handleInputChange = (event) => {
    let inputValue = event.target.value;
    // 只允许输入数字和点，过滤非法字符
    inputValue = inputValue.replace(/[^\d.]/g, "");
    // 按点分割成段，限制每个段不超过3位，且数值不超过255
    const segments = inputValue.split(".");
    const validSegments = segments.map(seg => {
      // 去掉前导零（比如"012"转为"12"，但单个"0"保留）
      seg = seg.replace(/^0+(?=\d)/, "");
      // 限制长度不超过3位
      if (seg.length > 3) seg = seg.slice(0, 3);
      // 限制数值不超过255
      if (parseInt(seg, 10) > 255) seg = "255";
      return seg;
    });
    // 重新拼接成IP格式，最多保留4个段
    const processedValue = validSegments.slice(0, 4).join(".");
    setIPAddress(processedValue);
  };

  // 验证完整IP格式的方法，可在提交时使用
  const validateFullIP = () => {
    const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
    if (!ipRegex.test(ipAddress)) {
      alert("请输入有效的IP地址");
      return false;
    }
    // 额外验证每个段的数值范围
    const segments = ipAddress.split(".");
    return segments.every(seg => parseInt(seg, 10) <= 255);
  };

  return (
    <div>
      <label>
        Enter IP Address:
        <input
          type="text"
          value={ipAddress}
          onChange={handleInputChange}
          placeholder="XXX.XXX.XXX.XXX"
          onBlur={validateFullIP} // 失去焦点时验证完整格式
        />
      </label>
      <p>Current IP Address: {ipAddress}</p>
      <button onClick={validateFullIP}>提交验证</button>
    </div>
  );
}

export default IP;

关键修改说明 #

• 过滤非法字符：用replace(/[^\d.]/g, "")确保只能输入数字和点。
• 分段处理：将输入按点分割后，逐个处理每个段的长度、数值范围，避免出现超过255的数值或过长的段。
• 实时更新状态：不再等待完整IP输入才更新，而是实时处理并更新输入框内容，用户输入时能看到反馈。
• 完整验证时机：把完整IP格式验证放在失去焦点或提交时，兼顾输入流畅性和最终合法性。

内容的提问来源于stack exchange，提问作者Adam Mohammed Muzammil