React输入框非悬停仅显后四位：现有实现是否安全合规？

需求：输入框未悬停/失焦时仅显示最后四位，比如输入123456789，失焦后显示*****6789；悬停/聚焦时显示完整内容。

我自己试错写了一个React示例，但不确定有没有潜在Bug，也想知道有没有更优的实现方式。现在发现当前实现里onChange好像没触发，而且担心提交时拿到的是掩码值而非真实输入内容，想问这个实现是否安全、是不是推荐方案。

当前实现代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [hovered, setHovered] = useState(false);
  const [testInput, setTestInput] = useState("");
  const showLastFourDigits = (value) => {
    if (value.length == 9) {
      const result = "*".repeat(value.length - 4) + value.slice(-4);
      return result;
    } else {
      return value;
    }
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(testInput);
  };

  return (
    <form className="App">
      <input
        value={!hovered ? showLastFourDigits(testInput) : testInput}
        onChange={(e) => setTestInput(e.target.value)}
        onFocus={() => setHovered(true)}
        onBlur={() => setHovered(false)}
        maxLength={9}
      />
      <button onClick={onSubmit}>Submit</button>
      <p>testInput:{testInput}</p>
    </form>
  );
}

现有实现的问题分析 #

• onChange触发异常：当输入框显示掩码时，输入内容会和testInput的真实值不一致，React受控组件会强制同步value指定的掩码，导致用户输入时内容被覆盖，onChange无法正常获取输入。比如输入到第9位后，再输入会被掩码强制替换，无法修改内容。
• 状态逻辑缺失：当前只绑定了onFocus/onBlur，没有处理onMouseEnter/onMouseLeave，无法实现悬停显示完整内容的需求，只有聚焦时才会显示真实值。
• 掩码条件限制过死：只有输入长度等于9时才显示掩码，若输入长度在5-8之间，不会触发掩码，不符合“未悬停时仅显示最后四位”的需求。

安全与推荐性判断 #

• 数据安全性：当前实现中testInput存储的是真实输入值，提交时onSubmit打印的是真实值，这部分是安全的，不会提交掩码值。但输入过程中的交互问题会导致用户体验极差。
• 是否推荐：现有实现存在明显的交互Bug，不推荐直接使用，需要优化。

优化后的实现方案 #

核心思路：

• 区分显示值和真实值，testInput始终存储真实值，显示值根据状态动态生成。
• 同时处理聚焦和悬停状态，确保两种场景都能切换显示模式。
• 修改掩码逻辑，只要输入长度大于4，就显示前半部分为*，保留最后四位；长度小于等于4时直接显示真实值。

优化代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [testInput, setTestInput] = useState("");
  // 控制是否显示真实值：聚焦或悬停时为true
  const [showRealValue, setShowRealValue] = useState(false);

  // 生成掩码显示值
  const getDisplayValue = (value) => {
    if (value.length <= 4) return value;
    return "*".repeat(value.length - 4) + value.slice(-4);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log("提交的真实值：", testInput);
  };

  return (
    <form className="App">
      <input
        value={showRealValue ? testInput : getDisplayValue(testInput)}
        onChange={(e) => setTestInput(e.target.value)}
        onFocus={() => setShowRealValue(true)}
        onBlur={() => setShowRealValue(false)}
        onMouseEnter={() => setShowRealValue(true)}
        onMouseLeave={() => setShowRealValue(false)}
        maxLength={9}
      />
      <button onClick={onSubmit}>Submit</button>
      <p>真实值存储：{testInput}</p>
    </form>
  );
}

优化点说明 #

1. 状态拆分：用showRealValue统一控制显示真实值的条件，同时绑定onMouseEnter/onMouseLeave实现悬停切换。
2. 掩码逻辑优化：只要输入长度超过4就生成掩码，更贴合需求。
3. 交互修复：输入时始终基于真实值处理，不会出现输入被覆盖的问题，onChange能正常触发更新真实值。
4. 数据安全：真实值始终存在testInput中，提交时直接使用即可，不会提交掩码值。

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