97 lines
4.1 KiB
JSON
97 lines
4.1 KiB
JSON
{
|
|
"slug": "numberrangeinput",
|
|
"end": "react",
|
|
"curated": true,
|
|
"summary": "React 端数字区间输入：两个受控数字框共用一套校验，出错时显示文案并额外回调 onError。",
|
|
"usage": [
|
|
"value 是长度为 2 的数组，两个输入框分别取 value[0] 与 value[1]；组件本身不存值，改哪边就把另一边原样带上再回调整体。",
|
|
"校验在每次输入时执行：先查两端是否越界，再查最小值是否大于最大值，错误文案写进内部 errorMsg 并同步交给 onError。",
|
|
"min 与 max 默认取负正无穷，传 Infinity 时越界判断永不成立，相当于关闭范围校验。",
|
|
"step 同时作为 step 属性与原生 input 的 min / max 一起下发给数字框，浏览器会参与部分约束。",
|
|
"错误态只体现为外层加 is-error 与出现消息节点，输入框本身不加任何错误类。",
|
|
"separator 与 unit 都是纯展示文本，unit 为空时不渲染对应节点。"
|
|
],
|
|
"bestPractices": [
|
|
"onError 在每次校验后都回调，包括错误被清除时传入空串，可用于驱动外部表单的提交按钮禁用态。",
|
|
"min 与 max 参与的是字符串与数值混比，输入框里留着空串时会跳过越界判断，只做空值保护。",
|
|
"组件不在失焦时做取整或规范化，小数与超出 step 的值会原样回调，需要外部自行规整。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "React 端 9 个 props 含 onChange 与 onError 两个回调；错误文案是唯一内部 state，值完全由外部 value 数组控制。",
|
|
"table": [
|
|
{
|
|
"name": "value",
|
|
"type": "Array<String>，默认 [空, 空]",
|
|
"desc": "长度为 2 的区间值，第 0 项最小值、第 1 项最大值"
|
|
},
|
|
{
|
|
"name": "step",
|
|
"type": "Number，默认 1",
|
|
"desc": "同时作为两个数字框的 step 属性"
|
|
},
|
|
{
|
|
"name": "min",
|
|
"type": "Number，默认 -Infinity",
|
|
"desc": "允许的下界，越界时给出错误文案"
|
|
},
|
|
{
|
|
"name": "max",
|
|
"type": "Number，默认 Infinity",
|
|
"desc": "允许的上界，越界时给出错误文案"
|
|
},
|
|
{
|
|
"name": "separator",
|
|
"type": "String，默认 —",
|
|
"desc": "两个输入框之间的分隔文本"
|
|
},
|
|
{
|
|
"name": "unit",
|
|
"type": "String，默认空",
|
|
"desc": "值后方的单位文本，为空时不渲染"
|
|
},
|
|
{
|
|
"name": "placeholder",
|
|
"type": "Array<String>",
|
|
"desc": "两个输入框各自的占位文案"
|
|
},
|
|
{
|
|
"name": "onChange",
|
|
"type": "(arr) => void",
|
|
"desc": "任一输入变化即回调，参数为新的两元数组"
|
|
},
|
|
{
|
|
"name": "onError",
|
|
"type": "(msg: String) => void",
|
|
"desc": "校验后回调错误文案，无错误时为空串"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"两个数字框都没有 label 或 aria-label，仅靠 placeholder 区分最小与最大。",
|
|
"错误文案节点没有 role=alert 或 aria-live，校验失败不会被读屏器主动播报。",
|
|
"输入框没有 aria-invalid，错误状态只体现在外层容器的 is-error 类上。",
|
|
"原生 number 类型会提供步进按钮，键盘可上下调整数值。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/NumberRangeInput.jsx",
|
|
"kind": "React 实现",
|
|
"desc": "NumberRangeInput.jsx —— 本端实现全文（结构、事件与状态逻辑）"
|
|
},
|
|
{
|
|
"file": "frameworks/NumberRangeInput.css",
|
|
"kind": "样式文件",
|
|
"desc": "frameworks/NumberRangeInput.css —— 本端 kole-* 类名与 is-* 状态类的样式定义"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"numberrangeinput-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 与默认值见 frameworks/NumberRangeInput.jsx:4-7，校验逻辑见第 10-18 行。",
|
|
"两侧输入处理见 frameworks/NumberRangeInput.jsx:19-28，错误类与消息渲染见第 31 行与第 38 行。",
|
|
"min 与 max 同时下发给原生输入见 frameworks/NumberRangeInput.jsx:32 与第 35 行。"
|
|
]
|
|
}
|