@hsu-react/ui 2.4.9 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,23 @@ import { ItemContainerProps } from "../../ItemContainer";
2
2
  import { InputNumberProps } from "../../../Input/Number";
3
3
  import React from "react";
4
4
  export interface FormInputNumberProps extends ItemContainerProps {
5
- componentProps?: InputNumberProps;
5
+ /**
6
+ * `onChange` 的签名比基础组件宽:作为**表单字段**,默认交出的是
7
+ * `number | null`(见 Bridge 的注释)。写这个回调的人拿到的与表单拿到的
8
+ * 是同一个值。
9
+ */
10
+ componentProps?: Omit<InputNumberProps, "onChange"> & {
11
+ onChange?: (value: string | number | null) => void;
12
+ };
13
+ /**
14
+ * 交给表单的是字符串而不是数字。默认 `false`。
15
+ *
16
+ * 只有真的要处理**超出 IEEE754 安全范围的大数**(订单号、雪花 ID)时才打开
17
+ * —— 那种值转成 number 会丢精度,必须一路以字符串传递。
18
+ *
19
+ * 2.5.0 之前没有这个开关,行为固定等同于 `stringMode`(见下方 Bridge 注释)。
20
+ */
21
+ stringMode?: boolean;
6
22
  }
7
23
  declare const FormInputNumber: React.FC<FormInputNumberProps>;
8
24
  export default FormInputNumber;
@@ -1,6 +1,7 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["componentProps", "className", "disabled"],
3
- _excluded2 = ["placeholder"];
2
+ var _excluded = ["value", "onChange", "componentOnChange", "stringMode"],
3
+ _excluded2 = ["componentProps", "className", "disabled", "stringMode"],
4
+ _excluded3 = ["placeholder", "onChange"];
4
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
7
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,19 +12,77 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
11
12
  import ItemContainer from "../../ItemContainer";
12
13
  import Input from "../../../Input";
13
14
  import React from "react";
15
+
16
+ // value / onChange 要重新声明:`InputNumberProps` 上那两个是**基础组件**的
17
+ // 契约(字符串进、字符串出),而这里收的是**表单值**,可以是数字或 null
14
18
  import { jsx as _jsx } from "react/jsx-runtime";
19
+ /**
20
+ * 夹在 `Form.Item` 与 `Input.Number` 之间,**把字符串换成数字再交给表单**。
21
+ *
22
+ * 为什么需要它:`Input.Number` 内部以字符串保存(底层 `stringMode`,为的是不
23
+ * 丢大数精度),`onChange` 交出的也是字符串。这对一个**基础输入组件**是合理
24
+ * 的,但对一个叫 INPUTNUMBER 的**表单字段**不合理 —— 表单收上去的值会直接
25
+ * 进请求体,而后端字段多半是整数:
26
+ *
27
+ * ```
28
+ * 422 invalid type: string "2", expected i32
29
+ * ```
30
+ *
31
+ * 这个坑平时看不见:没动过的字段,值来自详情接口、本来就是数字,原样发回去
32
+ * 没事;**只有用户真的改了那一格**才会变成字符串。现象是「我明明只改了个
33
+ * 数字却保存失败」,而且报错在服务端,前端一行日志都没有。
34
+ *
35
+ * 转换只在**往上交**的方向做;`Input.Number` 内部仍然是字符串,所以正在敲的
36
+ * "1." / "1.50" 不会被改写(配套改动见 `Input/Number` 里的 sameNumber 判断)。
37
+ */
38
+ var Bridge = function Bridge(props) {
39
+ var value = props.value,
40
+ onChange = props.onChange,
41
+ componentOnChange = props.componentOnChange,
42
+ stringMode = props.stringMode,
43
+ rest = _objectWithoutProperties(props, _excluded);
44
+ var emit = function emit(next) {
45
+ onChange === null || onChange === void 0 || onChange(next);
46
+ componentOnChange === null || componentOnChange === void 0 || componentOnChange(next);
47
+ };
48
+ return /*#__PURE__*/_jsx(Input.Number, _objectSpread(_objectSpread({}, rest), {}, {
49
+ value: value,
50
+ onChange: function onChange(text) {
51
+ if (stringMode) {
52
+ emit(text);
53
+ return;
54
+ }
55
+
56
+ // 空 → null 而不是 "":语义是「没填」,不是「填了个空字符串」。
57
+ // 后端 `Option<i32>` 收得下 null,收不下 ""
58
+ if (text === "" || text === null || text === undefined) {
59
+ emit(null);
60
+ return;
61
+ }
62
+ var num = Number(text);
63
+ // 转不动就原样交出去(用户可能正敲到 "-" 或 "1e" 这种中间态)。
64
+ // 硬转成 NaN 会让表单里躺着一个既非数字也非空的值
65
+ emit(Number.isFinite(num) ? num : text);
66
+ }
67
+ }));
68
+ };
15
69
  var FormInputNumber = function FormInputNumber(props) {
16
70
  var _inputConfig$disabled;
17
71
  var _props$componentProps = props.componentProps,
18
72
  componentProps = _props$componentProps === void 0 ? {} : _props$componentProps,
19
73
  itemClassName = props.className,
20
74
  disabled = props.disabled,
21
- formItemProps = _objectWithoutProperties(props, _excluded);
75
+ stringMode = props.stringMode,
76
+ formItemProps = _objectWithoutProperties(props, _excluded2);
77
+ // onChange 必须摘出来,理由见 BridgeProps.componentOnChange
22
78
  var placeholder = componentProps.placeholder,
23
- inputConfig = _objectWithoutProperties(componentProps, _excluded2);
79
+ componentOnChange = componentProps.onChange,
80
+ inputConfig = _objectWithoutProperties(componentProps, _excluded3);
24
81
  return /*#__PURE__*/_jsx(ItemContainer, _objectSpread(_objectSpread({}, formItemProps), {}, {
25
82
  className: "".concat(itemClassName !== null && itemClassName !== void 0 ? itemClassName : ""),
26
- children: /*#__PURE__*/_jsx(Input.Number, _objectSpread(_objectSpread({}, inputConfig), {}, {
83
+ children: /*#__PURE__*/_jsx(Bridge, _objectSpread(_objectSpread({}, inputConfig), {}, {
84
+ componentOnChange: componentOnChange,
85
+ stringMode: stringMode,
27
86
  disabled: (_inputConfig$disabled = inputConfig.disabled) !== null && _inputConfig$disabled !== void 0 ? _inputConfig$disabled : disabled,
28
87
  placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "请输入"
29
88
  }))
@@ -3,7 +3,11 @@ import React from "react";
3
3
  export interface InputNumberProps extends Omit<AntdInputNumberProps, "ref" | "onChange" | "value"> {
4
4
  getRef?: (ref: HTMLInputElement | null) => void;
5
5
  onChange?: (value: string) => void;
6
- value?: string;
6
+ /**
7
+ * 受控值。本组件内部**始终以字符串保存**(底层开了 antd 的 `stringMode`,
8
+ * 为的是不丢大数精度),但外部传数字进来也接得住。
9
+ */
10
+ value?: string | number | null;
7
11
  allowClear?: boolean;
8
12
  wrapperClassName?: string;
9
13
  }
@@ -64,16 +64,33 @@ var InputNumber = function InputNumber(props) {
64
64
  // Update internal state only when the external value prop actually changes
65
65
  if (prevValueRef.current !== value) {
66
66
  prevValueRef.current = value;
67
- if (value !== undefined) {
67
+
68
+ // 数值相等就不要回写文本。
69
+ //
70
+ // 上游把值转成数字之后(`FormItem` 的 INPUTNUMBER 默认就会转),一个
71
+ // 回环会打回来:输入 "1." → onChange → 表单存 1 → value={1} 传回来。
72
+ // 若照单全收地写成 "1",用户刚敲的小数点当场消失、光标还会跳到末尾,
73
+ // "1.50" 也会被改写成 "1.5"。
74
+ //
75
+ // 判据用**数值相等**而不是字符串相等:这几种写法("1." / "1.50" / "+1")
76
+ // 表示的是同一个数,此时以用户正在敲的那份文本为准。
77
+ var sameNumber = value !== undefined && value !== null && _value !== "" && Number(value) === Number(_value);
78
+ if (sameNumber) {
79
+ // 只同步「已提交值」,不动正在编辑的文本
80
+ setLastValue(_value);
81
+ } else if (value !== undefined && value !== null) {
68
82
  var newValue = typeof value === "number" ? "".concat(value) : value === null || value === void 0 ? void 0 : value.toString();
69
83
  setValue(newValue);
70
84
  setLastValue(newValue);
71
85
  } else {
72
- // Clear only on initialization or when explicitly set to undefined externally
86
+ // Clear only on initialization or when explicitly set to undefined/null externally
73
87
  setValue("");
74
88
  setLastValue("");
75
89
  }
76
90
  }
91
+ // `_value` 是刻意不进依赖的:这个 effect 只该在**外部** value 变化时跑,
92
+ // 把它加进来会让每次键入都重跑一遍,等于绕过上面那个 prevValueRef 判断
93
+ // eslint-disable-next-line react-hooks/exhaustive-deps
77
94
  }, [value]);
78
95
  useEffect(function () {
79
96
  getRef === null || getRef === void 0 || getRef(ref.current);
@@ -2,7 +2,23 @@ import { ItemContainerProps } from "../../ItemContainer";
2
2
  import { InputNumberProps } from "../../../Input/Number";
3
3
  import React from "react";
4
4
  export interface FormInputNumberProps extends ItemContainerProps {
5
- componentProps?: InputNumberProps;
5
+ /**
6
+ * `onChange` 的签名比基础组件宽:作为**表单字段**,默认交出的是
7
+ * `number | null`(见 Bridge 的注释)。写这个回调的人拿到的与表单拿到的
8
+ * 是同一个值。
9
+ */
10
+ componentProps?: Omit<InputNumberProps, "onChange"> & {
11
+ onChange?: (value: string | number | null) => void;
12
+ };
13
+ /**
14
+ * 交给表单的是字符串而不是数字。默认 `false`。
15
+ *
16
+ * 只有真的要处理**超出 IEEE754 安全范围的大数**(订单号、雪花 ID)时才打开
17
+ * —— 那种值转成 number 会丢精度,必须一路以字符串传递。
18
+ *
19
+ * 2.5.0 之前没有这个开关,行为固定等同于 `stringMode`(见下方 Bridge 注释)。
20
+ */
21
+ stringMode?: boolean;
6
22
  }
7
23
  declare const FormInputNumber: React.FC<FormInputNumberProps>;
8
24
  export default FormInputNumber;
@@ -9,22 +9,83 @@ var _Input = _interopRequireDefault(require("../../../Input"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+ // value / onChange 要重新声明:`InputNumberProps` 上那两个是**基础组件**的
13
+ // 契约(字符串进、字符串出),而这里收的是**表单值**,可以是数字或 null
14
+
15
+ /**
16
+ * 夹在 `Form.Item` 与 `Input.Number` 之间,**把字符串换成数字再交给表单**。
17
+ *
18
+ * 为什么需要它:`Input.Number` 内部以字符串保存(底层 `stringMode`,为的是不
19
+ * 丢大数精度),`onChange` 交出的也是字符串。这对一个**基础输入组件**是合理
20
+ * 的,但对一个叫 INPUTNUMBER 的**表单字段**不合理 —— 表单收上去的值会直接
21
+ * 进请求体,而后端字段多半是整数:
22
+ *
23
+ * ```
24
+ * 422 invalid type: string "2", expected i32
25
+ * ```
26
+ *
27
+ * 这个坑平时看不见:没动过的字段,值来自详情接口、本来就是数字,原样发回去
28
+ * 没事;**只有用户真的改了那一格**才会变成字符串。现象是「我明明只改了个
29
+ * 数字却保存失败」,而且报错在服务端,前端一行日志都没有。
30
+ *
31
+ * 转换只在**往上交**的方向做;`Input.Number` 内部仍然是字符串,所以正在敲的
32
+ * "1." / "1.50" 不会被改写(配套改动见 `Input/Number` 里的 sameNumber 判断)。
33
+ */
34
+ const Bridge = props => {
35
+ const {
36
+ value,
37
+ onChange,
38
+ componentOnChange,
39
+ stringMode,
40
+ ...rest
41
+ } = props;
42
+ const emit = next => {
43
+ onChange?.(next);
44
+ componentOnChange?.(next);
45
+ };
46
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Number, {
47
+ ...rest,
48
+ value: value,
49
+ onChange: text => {
50
+ if (stringMode) {
51
+ emit(text);
52
+ return;
53
+ }
54
+
55
+ // 空 → null 而不是 "":语义是「没填」,不是「填了个空字符串」。
56
+ // 后端 `Option<i32>` 收得下 null,收不下 ""
57
+ if (text === "" || text === null || text === undefined) {
58
+ emit(null);
59
+ return;
60
+ }
61
+ const num = Number(text);
62
+ // 转不动就原样交出去(用户可能正敲到 "-" 或 "1e" 这种中间态)。
63
+ // 硬转成 NaN 会让表单里躺着一个既非数字也非空的值
64
+ emit(Number.isFinite(num) ? num : text);
65
+ }
66
+ });
67
+ };
12
68
  const FormInputNumber = props => {
13
69
  const {
14
70
  componentProps = {},
15
71
  className: itemClassName,
16
72
  disabled,
73
+ stringMode,
17
74
  ...formItemProps
18
75
  } = props;
76
+ // onChange 必须摘出来,理由见 BridgeProps.componentOnChange
19
77
  const {
20
78
  placeholder,
79
+ onChange: componentOnChange,
21
80
  ...inputConfig
22
81
  } = componentProps;
23
82
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContainer.default, {
24
83
  ...formItemProps,
25
84
  className: `${itemClassName ?? ""}`,
26
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Number, {
85
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Bridge, {
27
86
  ...inputConfig,
87
+ componentOnChange: componentOnChange,
88
+ stringMode: stringMode,
28
89
  disabled: inputConfig.disabled ?? disabled,
29
90
  placeholder: placeholder ?? "请输入"
30
91
  })
@@ -3,7 +3,11 @@ import React from "react";
3
3
  export interface InputNumberProps extends Omit<AntdInputNumberProps, "ref" | "onChange" | "value"> {
4
4
  getRef?: (ref: HTMLInputElement | null) => void;
5
5
  onChange?: (value: string) => void;
6
- value?: string;
6
+ /**
7
+ * 受控值。本组件内部**始终以字符串保存**(底层开了 antd 的 `stringMode`,
8
+ * 为的是不丢大数精度),但外部传数字进来也接得住。
9
+ */
10
+ value?: string | number | null;
7
11
  allowClear?: boolean;
8
12
  wrapperClassName?: string;
9
13
  }
@@ -50,16 +50,33 @@ const InputNumber = props => {
50
50
  // Update internal state only when the external value prop actually changes
51
51
  if (prevValueRef.current !== value) {
52
52
  prevValueRef.current = value;
53
- if (value !== undefined) {
53
+
54
+ // 数值相等就不要回写文本。
55
+ //
56
+ // 上游把值转成数字之后(`FormItem` 的 INPUTNUMBER 默认就会转),一个
57
+ // 回环会打回来:输入 "1." → onChange → 表单存 1 → value={1} 传回来。
58
+ // 若照单全收地写成 "1",用户刚敲的小数点当场消失、光标还会跳到末尾,
59
+ // "1.50" 也会被改写成 "1.5"。
60
+ //
61
+ // 判据用**数值相等**而不是字符串相等:这几种写法("1." / "1.50" / "+1")
62
+ // 表示的是同一个数,此时以用户正在敲的那份文本为准。
63
+ const sameNumber = value !== undefined && value !== null && _value !== "" && Number(value) === Number(_value);
64
+ if (sameNumber) {
65
+ // 只同步「已提交值」,不动正在编辑的文本
66
+ setLastValue(_value);
67
+ } else if (value !== undefined && value !== null) {
54
68
  const newValue = typeof value === "number" ? `${value}` : value?.toString();
55
69
  setValue(newValue);
56
70
  setLastValue(newValue);
57
71
  } else {
58
- // Clear only on initialization or when explicitly set to undefined externally
72
+ // Clear only on initialization or when explicitly set to undefined/null externally
59
73
  setValue("");
60
74
  setLastValue("");
61
75
  }
62
76
  }
77
+ // `_value` 是刻意不进依赖的:这个 effect 只该在**外部** value 变化时跑,
78
+ // 把它加进来会让每次键入都重跑一遍,等于绕过上面那个 prevValueRef 判断
79
+ // eslint-disable-next-line react-hooks/exhaustive-deps
63
80
  }, [value]);
64
81
  (0, _react.useEffect)(() => {
65
82
  getRef?.(ref.current);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.4.9",
3
+ "version": "2.5.0",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -5,22 +5,114 @@ import { InputNumberProps } from "../../../Input/Number";
5
5
  import React from "react";
6
6
 
7
7
  export interface FormInputNumberProps extends ItemContainerProps {
8
- componentProps?: InputNumberProps;
8
+ /**
9
+ * `onChange` 的签名比基础组件宽:作为**表单字段**,默认交出的是
10
+ * `number | null`(见 Bridge 的注释)。写这个回调的人拿到的与表单拿到的
11
+ * 是同一个值。
12
+ */
13
+ componentProps?: Omit<InputNumberProps, "onChange"> & {
14
+ onChange?: (value: string | number | null) => void;
15
+ };
16
+ /**
17
+ * 交给表单的是字符串而不是数字。默认 `false`。
18
+ *
19
+ * 只有真的要处理**超出 IEEE754 安全范围的大数**(订单号、雪花 ID)时才打开
20
+ * —— 那种值转成 number 会丢精度,必须一路以字符串传递。
21
+ *
22
+ * 2.5.0 之前没有这个开关,行为固定等同于 `stringMode`(见下方 Bridge 注释)。
23
+ */
24
+ stringMode?: boolean;
9
25
  }
10
26
 
27
+ // value / onChange 要重新声明:`InputNumberProps` 上那两个是**基础组件**的
28
+ // 契约(字符串进、字符串出),而这里收的是**表单值**,可以是数字或 null
29
+ type BridgeProps = Omit<InputNumberProps, "value" | "onChange"> & {
30
+ /** antd Form.Item 注入 */
31
+ value?: string | number | null;
32
+ /** antd Form.Item 注入 */
33
+ onChange?: (value: string | number | null) => void;
34
+ /**
35
+ * 使用方写在 `componentProps.onChange` 里的那个回调。
36
+ *
37
+ * 单独接出来、不跟着 `componentProps` 一起展开:展开的话它会盖掉
38
+ * Form.Item 注入的那个 onChange,字段值就再也传不到表单里了。
39
+ * 它拿到的与表单拿到的**是同一个值**(默认已转成数字)。
40
+ */
41
+ componentOnChange?: (value: string | number | null) => void;
42
+ stringMode?: boolean;
43
+ };
44
+
45
+ /**
46
+ * 夹在 `Form.Item` 与 `Input.Number` 之间,**把字符串换成数字再交给表单**。
47
+ *
48
+ * 为什么需要它:`Input.Number` 内部以字符串保存(底层 `stringMode`,为的是不
49
+ * 丢大数精度),`onChange` 交出的也是字符串。这对一个**基础输入组件**是合理
50
+ * 的,但对一个叫 INPUTNUMBER 的**表单字段**不合理 —— 表单收上去的值会直接
51
+ * 进请求体,而后端字段多半是整数:
52
+ *
53
+ * ```
54
+ * 422 invalid type: string "2", expected i32
55
+ * ```
56
+ *
57
+ * 这个坑平时看不见:没动过的字段,值来自详情接口、本来就是数字,原样发回去
58
+ * 没事;**只有用户真的改了那一格**才会变成字符串。现象是「我明明只改了个
59
+ * 数字却保存失败」,而且报错在服务端,前端一行日志都没有。
60
+ *
61
+ * 转换只在**往上交**的方向做;`Input.Number` 内部仍然是字符串,所以正在敲的
62
+ * "1." / "1.50" 不会被改写(配套改动见 `Input/Number` 里的 sameNumber 判断)。
63
+ */
64
+ const Bridge: React.FC<BridgeProps> = (props) => {
65
+ const { value, onChange, componentOnChange, stringMode, ...rest } = props;
66
+
67
+ const emit = (next: string | number | null) => {
68
+ onChange?.(next);
69
+ componentOnChange?.(next);
70
+ };
71
+
72
+ return (
73
+ <Input.Number
74
+ {...rest}
75
+ value={value}
76
+ onChange={(text) => {
77
+ if (stringMode) {
78
+ emit(text);
79
+ return;
80
+ }
81
+
82
+ // 空 → null 而不是 "":语义是「没填」,不是「填了个空字符串」。
83
+ // 后端 `Option<i32>` 收得下 null,收不下 ""
84
+ if (text === "" || text === null || text === undefined) {
85
+ emit(null);
86
+ return;
87
+ }
88
+
89
+ const num = Number(text);
90
+ // 转不动就原样交出去(用户可能正敲到 "-" 或 "1e" 这种中间态)。
91
+ // 硬转成 NaN 会让表单里躺着一个既非数字也非空的值
92
+ emit(Number.isFinite(num) ? num : text);
93
+ }}
94
+ />
95
+ );
96
+ };
97
+
11
98
  const FormInputNumber: React.FC<FormInputNumberProps> = (props) => {
12
99
  const {
13
100
  componentProps = {},
14
101
  className: itemClassName,
15
102
  disabled,
103
+ stringMode,
16
104
  ...formItemProps
17
105
  } = props;
18
- const { placeholder, ...inputConfig } = componentProps;
106
+ // onChange 必须摘出来,理由见 BridgeProps.componentOnChange
107
+ const { placeholder, onChange: componentOnChange, ...inputConfig } =
108
+ componentProps;
19
109
 
20
110
  return (
21
111
  <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
22
- <Input.Number
112
+ <Bridge
23
113
  {...inputConfig}
114
+ componentOnChange={componentOnChange}
115
+ stringMode={stringMode}
24
116
  disabled={inputConfig.disabled ?? disabled}
25
117
  placeholder={placeholder ?? "请输入"}
26
118
  />
@@ -93,6 +93,22 @@ export default () => (
93
93
  );
94
94
  ```
95
95
 
96
+ > **`2.5.0` 起,`INPUTNUMBER` 交给表单的是 `number | null`**(此前是字符串)。
97
+ >
98
+ > 表单值往往原样进请求体,而后端字段多半是整数,交字符串上去会被强类型服务端
99
+ > 拒掉(Rust/serde 会回 `invalid type: string "2", expected i32`)。这个问题
100
+ > 平时看不见:**没动过的字段**值来自详情接口、本来就是数字,只有用户真的改了
101
+ > 那一格才会变成字符串 —— 现象是「我只改了个数字却保存失败」。
102
+ >
103
+ > - 空值交出的是 `null`(「没填」),不是 `""`。
104
+ > - 敲到一半的中间态(`-`、`1e`)原样交出,不会变成 `NaN`。
105
+ > - 正在输入的文本不会被回写打断,`1.` / `1.50` 都保得住。
106
+ > - 确实需要字符串(大数不丢精度)时,加 `stringMode`:
107
+ >
108
+ > ```tsx
109
+ > <FormItem type="INPUTNUMBER" name="orderNo" label="订单号" stringMode />
110
+ > ```
111
+
96
112
  ## 范围输入
97
113
 
98
114
  ```tsx
@@ -17,7 +17,11 @@ export interface InputNumberProps extends Omit<
17
17
  > {
18
18
  getRef?: (ref: HTMLInputElement | null) => void;
19
19
  onChange?: (value: string) => void;
20
- value?: string;
20
+ /**
21
+ * 受控值。本组件内部**始终以字符串保存**(底层开了 antd 的 `stringMode`,
22
+ * 为的是不丢大数精度),但外部传数字进来也接得住。
23
+ */
24
+ value?: string | number | null;
21
25
  allowClear?: boolean;
22
26
  wrapperClassName?: string;
23
27
  }
@@ -76,17 +80,38 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
76
80
  if (prevValueRef.current !== value) {
77
81
  prevValueRef.current = value;
78
82
 
79
- if (value !== undefined) {
83
+ // 数值相等就不要回写文本。
84
+ //
85
+ // 上游把值转成数字之后(`FormItem` 的 INPUTNUMBER 默认就会转),一个
86
+ // 回环会打回来:输入 "1." → onChange → 表单存 1 → value={1} 传回来。
87
+ // 若照单全收地写成 "1",用户刚敲的小数点当场消失、光标还会跳到末尾,
88
+ // "1.50" 也会被改写成 "1.5"。
89
+ //
90
+ // 判据用**数值相等**而不是字符串相等:这几种写法("1." / "1.50" / "+1")
91
+ // 表示的是同一个数,此时以用户正在敲的那份文本为准。
92
+ const sameNumber =
93
+ value !== undefined &&
94
+ value !== null &&
95
+ _value !== "" &&
96
+ Number(value) === Number(_value);
97
+
98
+ if (sameNumber) {
99
+ // 只同步「已提交值」,不动正在编辑的文本
100
+ setLastValue(_value);
101
+ } else if (value !== undefined && value !== null) {
80
102
  const newValue =
81
103
  typeof value === "number" ? `${value}` : value?.toString();
82
104
  setValue(newValue);
83
105
  setLastValue(newValue);
84
106
  } else {
85
- // Clear only on initialization or when explicitly set to undefined externally
107
+ // Clear only on initialization or when explicitly set to undefined/null externally
86
108
  setValue("");
87
109
  setLastValue("");
88
110
  }
89
111
  }
112
+ // `_value` 是刻意不进依赖的:这个 effect 只该在**外部** value 变化时跑,
113
+ // 把它加进来会让每次键入都重跑一遍,等于绕过上面那个 prevValueRef 判断
114
+ // eslint-disable-next-line react-hooks/exhaustive-deps
90
115
  }, [value]);
91
116
 
92
117
  useEffect(() => {
@@ -36,7 +36,15 @@ export default () => {
36
36
 
37
37
  ## 数字输入框
38
38
 
39
- 数字输入框,`onChange` 返回字符串,内置 `allowClear`、`controls={false}` 与 `stringMode`。
39
+ 数字输入框,`onChange` 返回**字符串**,内置 `allowClear`、`controls={false}` 与 `stringMode`。
40
+
41
+ 返回字符串是刻意的:`stringMode` 让超出 IEEE754 安全范围的大数(订单号、雪花 ID)
42
+ 不丢精度,而转成 `number` 就丢了。
43
+
44
+ > **注意**:作为**表单字段**用时(`FormItem type="INPUTNUMBER"`)行为不同 ——
45
+ > 自 `2.5.0` 起它交给表单的是 `number | null`。表单值通常会直接进请求体,
46
+ > 而后端字段多半是整数,交字符串上去会被强类型服务端拒掉。
47
+ > 详见 [FormItem 的 INPUTNUMBER](/components/form-item)。
40
48
 
41
49
  ```tsx
42
50
  import React from "react";