Ant Design 6.5.3 是一次以组件行为修复为主的版本。其中值得表单开发者关注的是 Input.OTP:字符串形式的 mask 不再导致组件忽略预期的输入类型,显式传入的 type 配置也会得到保留;当 mask={true} 时,输入框不应再直接显示原始验证码。版本中还包含与 Input.TextArea 调整大小有关的修复。
这些变化看起来集中在显示层,但验证码输入通常位于登录、支付确认和敏感操作链路中。升级时既要确认掩码是否正确,也要检查事件回调、自动填充和表单提交是否保持原有行为。
Input.OTP 修复了什么
Input.OTP 的 mask 用于控制验证码在界面中的显示方式。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 resize 和 autoSize 的责任。前者由浏览器拖动行为控制,后者由内容高度驱动;业务样式覆盖了 resize、height 或 overflow 时,也可能改变最终结果。
升级建议
从使用 6.x 的项目升级到 6.5.3,通常可以先锁定精确版本,在验证码登录页和包含 TextArea 的表单页执行一次针对性回归。测试至少应覆盖布尔 mask、自定义字符串 mask、显式 type、粘贴验证码、浏览器自动填充以及移动端数字键盘。
如果项目对 Input.OTP 做了二次封装,还要检查封装层是否自行重写了 mask 或 type。组件库已经修复内部属性处理,并不意味着业务封装中的覆盖逻辑会自动消失。完成验证后再更新锁文件和持续集成基线,能把这次小版本升级的风险控制在具体组件范围内。