数字输入框

数字输入组件为用户提供一个用于整数值的字段，以及用于增加或减少值的按钮。

useNumberInput API

导入

import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
// or
import { unstable_useNumberInput as useNumberInput } from '@mui/base';

通过阅读这篇关于最小化捆绑包大小的指南，了解两者之间的区别。

参数

名称	类型	默认值	描述
componentName	string	'useNumberInput'	使用 useNumberInput 的组件名称。用于调试目的。
defaultValue	number \| null	-	默认值。当组件不受控制时使用。
disabled	boolean	-	如果为 `true`，则组件被禁用。该属性默认为从父 FormControl 组件继承的值 (`false`)。
error	boolean	-	如果为 `true`，则 `input` 将通过设置 `aria-invalid` 属性来指示错误。该属性默认为从父 FormControl 组件继承的值 (`false`)。
inputId	string	-	input 元素的 `id` 属性。
inputRef	React.Ref<HTMLInputElement>	-	input 元素的 ref。
max	number	-	最大值。
min	number	-	最小值。
onBlur	(event?: React.FocusEvent<HTMLInputElement>) => void	-
onChange	(event: React.FocusEvent<HTMLInputElement> \| React.PointerEvent \| React.KeyboardEvent, value: number \| null) => void	-	当 `input` 失去焦点或步进器按钮被触发时，在值被限制和更改后触发的回调。当值未设置时，使用 `undefined` 调用。
onClick	React.MouseEventHandler	-
onFocus	React.FocusEventHandler	-
onInputChange	React.ChangeEventHandler<HTMLInputElement>	-	在每次按键后，在应用限制之前，当 `input` 值更改时触发的回调。请注意，`event.target.value` 可能包含超出 `min` 和 `max` 范围或以其他方式“无效”的值。
readOnly	boolean	false	如果为 `true`，则 `input` 元素变为只读。步进器按钮保持活动状态，此外，它们现在可以通过键盘聚焦。
required	boolean	-	如果为 `true`，则 `input` 元素为必填项。该属性默认为从父 FormControl 组件继承的值 (`false`)。
shiftMultiplier	number	-	如果在增加或减少值时按住 shift 键，则应用于 `step` 的乘数。默认为 `10`。
step	number	-	每次增加或减少时值变化的量。
value	number \| null	null	当前值。当组件受控时使用。

返回值

名称	类型	默认值	描述
disabled	boolean	false	如果为 `true`，则组件将被禁用。
error	boolean	false	如果为 `true`，则 `input` 将通过设置 `aria-invalid` 属性来指示错误。
focused	boolean	false	如果为 `true`，则 `input` 将被聚焦。
formControlContext	FormControlState \| undefined	-	来自 `useFormControlContext` Hook 的返回值。
getDecrementButtonProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputDecrementButtonSlotProps<ExternalProps>	-	用于减量按钮 slot 属性的解析器。
getIncrementButtonProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputIncrementButtonSlotProps<ExternalProps>	-	用于增量按钮 slot 属性的解析器。
getInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputInputSlotProps<ExternalProps>	-	用于 input slot 属性的解析器。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputRootSlotProps<ExternalProps>	-	用于 root slot 属性的解析器。
inputValue	string	-	`input` 元素在聚焦时的脏 `value`。
isDecrementDisabled	boolean	false	如果为 `true`，则减量按钮将被禁用。例如，当 `value` 已经达到 `min` 时
isIncrementDisabled	boolean	false	如果为 `true`，则增量按钮将被禁用。例如，当 `value` 已经达到 `max` 时
required	boolean	false	如果为 `true`，则 `input` 将指示它是必填项。
value	number \| null	-	`input` 元素的钳制 `value`。