68 lines
3.7 KiB
JSON
68 lines
3.7 KiB
JSON
{
|
||
"slug": "bankcardinput",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "银行卡输入：modelValue 受控卡号，自动四位分组并做 Luhn 校验与卡种识别。",
|
||
"usage": [
|
||
"React 端值用 modelValue 传入、onChange 上抛纯数字（已去空格），格式化只发生在展示层（BankCardInput.jsx:22-26,39-44）。",
|
||
"输入处理走 onInput 而非 onChange：把去非数字、截断 19 位、四位分组的结果直接写回 DOM，再 setState（BankCardInput.jsx:39-43）。",
|
||
"卡种识别靠前缀正则，覆盖 Visa/MasterCard/银联/AmEx/JCB，识别不出显示「未知」（BankCardInput.jsx:4-11,63）。",
|
||
"Luhn 校验只在位数达到 13 位后启用，未满 13 位不报错（BankCardInput.jsx:28-29）。",
|
||
"提示文案由四个分支生成，并把 valid/invalid 类名打到提示节点上（BankCardInput.jsx:30-37）。"
|
||
],
|
||
"bestPractices": [
|
||
"onChange 给的是纯数字串，落库前不需要再去空格；展示格式由组件负责，不要反向回写带空格的 modelValue。",
|
||
"组件把格式化值写入 DOM 后再回抛，属于混合控制；父组件不要对 modelValue 做二次清洗，否则光标会跳。",
|
||
"maxLength 固定 23（含分组空格），19 位数字是上限，超出会被静默截断（BankCardInput.jsx:40,57）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "string",
|
||
"desc": "受控卡号（纯数字串）"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "string",
|
||
"desc": "输入框占位文案"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "(digits) => void",
|
||
"desc": "值变化回调，参数为去空格后的数字串"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"inputMode=\"numeric\" 让移动端弹数字键盘（BankCardInput.jsx:55），对触屏输入友好。",
|
||
"输入框没有 label/aria-label，卡种与校验提示也未通过 aria-describedby 关联，读屏不知道当前校验结果。",
|
||
"校验提示是纯文本 div（BankCardInput.jsx:65），没有 role=\"alert\"，失败信息不会主动播报。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BankCardInput.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/BankCardInput.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bankcardinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/BankCardInput.jsx:22 中可指到 modelValue（string）——受控卡号（纯数字串）",
|
||
"frameworks/BankCardInput.jsx:22 中可指到 placeholder（string）——输入框占位文案",
|
||
"frameworks/BankCardInput.jsx:22 中可指到 onChange（(digits) => void）——值变化回调，参数为去空格后的数字串",
|
||
"props 解构清单见 frameworks/BankCardInput.jsx:22-22；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/BankCardInput.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：3 行中 3 行是 frameworks/BankCardInput.jsx 解构出的顶层 props（解构块 frameworks/BankCardInput.jsx:22-22）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|