React中onChange事件处理与实时输入验证的陷阱与解决方案

import React, { useState } from "react";

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

  const handleInputChange = (event) => {
    const inputValue = event.target.value;
    // 验证输入是否符合IP地址模式
    const isValidIP = /^(\d{1,3}\.){3}\d{1,3}$/.test(inputValue);

    if (isValidIP) {
      setIPAddress(inputValue); // 只有当输入完全符合IP模式时才更新状态
    }
    // else {
    //   // 如果不符合，ipAddress状态保持不变
    // }
  };

  return (
    <div>
      <label>
        输入IP地址:
        <input
          type="text"
          value={ipAddress} // 输入框的值绑定到ipAddress状态
          onChange={handleInputChange}
          placeholder="XXX.XXX.XXX.XXX"
        />
      </label>
      <p>当前IP地址: {ipAddress}</p>
    </div>
  );
}

export default IPValidatorProblem;

import React, { useState } from "react";

function IPValidatorSolution() {
  const [inputValue, setInputValue] = useState(""); // 存储输入框的实时值
  const [validatedIP, setValidatedIP] = useState(""); // 存储经过验证的IP地址
  const [error, setError] = useState(""); // 存储验证错误信息

  const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/; // 完整的IP地址正则

  // 实时更新输入框的值，不进行严格验证
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
    // 每次输入时清除之前的错误信息，提供即时反馈
    setError("");
  };

  // 当输入框失去焦点时进行验证
  const handleBlur = () => {
    if (inputValue.trim() === "") { // 允许空输入，如果需要
      setValidatedIP("");
      setError("");
      return;
    }

    if (ipPattern.test(inputValue)) {
      setValidatedIP(inputValue); // 只有有效时才更新validatedIP
      setError("");
    } else {
      setValidatedIP(""); // 无效时清空validatedIP
      setError("请输入有效的IP地址格式 (XXX.XXX.XXX.XXX)");
    }
  };

  // 点击按钮时进行最终验证和提交
  const handleSubmit = () => {
    if (ipPattern.test(inputValue)) {
      setValidatedIP(inputValue);
      setError("");
      alert(`已提交有效的IP地址: ${inputValue}`);
      // 这里可以执行提交表单等后续操作
    } else {
      setValidatedIP("");
      setError("提交失败：请输入有效的IP地址！");
      alert("提交失败：IP地址无效！");
    }
  };

  return (
    <div>
      <label>
        输入IP地址:
        <input
          type="text"
          value={inputValue} // 输入框绑定到inputValue
          onChange={handleInputChange}
          onBlur={handleBlur} // 失去焦点时触发验证
          placeholder="XXX.XXX.XXX.XXX"
          style={{ borderColor: error ? 'red' : '' }} // 根据错误状态改变边框颜色
        />
      </label>
      {error && <p style={{ color: 'red', fontSize: '0.9em' }}>{error}</p>}
      <p>当前输入: {inputValue}</p>
      <p>已验证IP地址: {validatedIP || "无"}</p>
      <button onClick={handleSubmit} style={{ marginTop: '10px' }}>验证并提交</button>
    </div>
  );
}

export default IPValidatorSolution;

const handleInputChange = (event) => {
  const rawValue = event.target.value;
  // 允许输入数字和点
  const filteredValue = rawValue.replace(/[^0-9.]/g, '');
  setInputValue(filteredValue);
  setError(""); // 清除错误
  // 注意：这里仍然没有完成IP地址的完整性验证
};