Ant Design 6.5.3:修正 Input.OTP 掩码与输入类型行为

2026-08-03 35 预计阅读时间: 1 分钟
来源: oschina.net AI 摘要 Original link

Disclaimer: This article is an AI-assisted summary. Read it together with the original source when precision matters. The summary may omit context, version differences, or edge cases and is not official documentation.

预计阅读时间:7 分钟

Ant Design 6.5.3 是一次以组件行为修复为主的版本。其中值得表单开发者关注的是 Input.OTP:字符串形式的 mask 不再导致组件忽略预期的输入类型,显式传入的 type 配置也会得到保留;当 mask={true} 时,输入框不应再直接显示原始验证码。版本中还包含与 Input.TextArea 调整大小有关的修复。

这些变化看起来集中在显示层,但验证码输入通常位于登录、支付确认和敏感操作链路中。升级时既要确认掩码是否正确,也要检查事件回调、自动填充和表单提交是否保持原有行为。

Input.OTP 修复了什么

Input.OTPmask 用于控制验证码在界面中的显示方式。6.5.3 主要处理了两类边界情况:

  • 使用字符串 mask 时,不应把内部输入元素错误地固定为 type="text"
  • 开发者显式设置的 type 应被保留,而不是被组件内部默认值覆盖。
  • 使用 mask={true} 时,界面应隐藏原始输入值,而不是继续显示验证码字符。

这里需要区分“视觉掩码”和“数据加密”。掩码只改变用户在页面上看到的内容;组件的 onChange、React 状态以及后续提交请求仍可能持有真实验证码。不要把 mask 当作阻止前端脚本读取数据的安全边界。

可以这样验证升级结果

下面是一个可直接放进 Vite React 项目的最小示例。它同时覆盖布尔掩码、字符串掩码和显式 type 配置。为了避免在页面上泄露验证码,示例只记录输入长度。

先创建项目并安装 6.5.3:

npm create vite@latest antd-otp-check -- --template react-ts
cd antd-otp-check
npm install
npm install antd@6.5.3
npm run dev

src/App.tsx 替换为:

import { Input, Space, Typography } from 'antd';
import 'antd/dist/reset.css';

export default function App() {
  const reportLength = (label: string) => (value: string) => {
    console.log(`${label}: ${value.length} digits entered`);
  };

  return (
    <main style={{ maxWidth: 520, margin: '48px auto', padding: 24 }}>
      <Typography.Title level={2}>OTP regression check</Typography.Title>

      <Space direction="vertical" size="large">
        <section>
          <Typography.Text>Boolean mask</Typography.Text>
          <Input.OTP
            length={6}
            mask
            inputMode="numeric"
            onChange={reportLength('boolean-mask')}
          />
        </section>

        <section>
          <Typography.Text>String mask with explicit type</Typography.Text>
          <Input.OTP
            length={6}
            mask="●"
            type="password"
            inputMode="numeric"
            onChange={reportLength('string-mask')}
          />
        </section>
      </Space>
    </main>
  );
}

运行后应重点检查:输入字符是否立即被掩码替代、第二组输入是否保留显式 type,以及输入满六位后 onChange 是否仍收到完整值。浏览器开发者工具中的 Elements 面板可以帮助确认实际生成的 input 属性。

如果项目启用了 TypeScript,而现有封装不允许向 Input.OTP 传入 type,应先检查封装组件的 props 类型是否遗漏字段,不要用 as any 绕过类型检查。

TextArea 不要只靠肉眼回归

发布摘要还提到 Input.TextArea 调整大小相关修复,但没有给出完整的触发条件和最终行为。对于依赖可拖动文本域、autoSize 或受控高度的业务,可以这样实践:在升级前后分别验证手动拖动、内容增长、清空内容和容器宽度变化。

一个简单的受控用例可以加入现有组件测试页:

import { Input } from 'antd';
import { useState } from 'react';

export function TextAreaResizeCheck() {
  const [value, setValue] = useState('Resize this field, then add more lines.');

  return (
    <Input.TextArea
      value={value}
      onChange={(event) => setValue(event.target.value)}
      autoSize={{ minRows: 3, maxRows: 8 }}
      style={{ width: 480, maxWidth: '100%' }}
    />
  );
}

注意不要在同一个测试中混淆 CSS resizeautoSize 的责任。前者由浏览器拖动行为控制,后者由内容高度驱动;业务样式覆盖了 resizeheightoverflow 时,也可能改变最终结果。

升级建议

从使用 6.x 的项目升级到 6.5.3,通常可以先锁定精确版本,在验证码登录页和包含 TextArea 的表单页执行一次针对性回归。测试至少应覆盖布尔 mask、自定义字符串 mask、显式 type、粘贴验证码、浏览器自动填充以及移动端数字键盘。

如果项目对 Input.OTP 做了二次封装,还要检查封装层是否自行重写了 masktype。组件库已经修复内部属性处理,并不意味着业务封装中的覆盖逻辑会自动消失。完成验证后再更新锁文件和持续集成基线,能把这次小版本升级的风险控制在具体组件范围内。


相关推荐