數字輸入框

數字輸入元件為使用者提供一個整數值欄位，以及用於增加或減少數值的按鈕。

useNumberInput API

Import

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`，則元件會停用。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
error	boolean	-	若為 `true`，`input` 將透過設定 `aria-invalid` 屬性來指示錯誤。此 prop 預設為從父 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` 元素為必填。此 prop 預設為從父 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>	-	用於解析遞減按鈕插槽 props 的解析器。
getIncrementButtonProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputIncrementButtonSlotProps<ExternalProps>	-	用於解析遞增按鈕插槽 props 的解析器。
getInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputInputSlotProps<ExternalProps>	-	用於解析輸入插槽 props 的解析器。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputRootSlotProps<ExternalProps>	-	用於解析根插槽 props 的解析器。
inputValue	string	-	當 `input` 元素處於焦點時，`input` 元素的未經處理的 `value`。
isDecrementDisabled	boolean	false	若為 `true`，遞減按鈕將會停用。例如，當 `value` 已達 `min` 時
isIncrementDisabled	boolean	false	若為 `true`，遞增按鈕將會停用。例如，當 `value` 已達 `max` 時
required	boolean	false	若為 `true`，`input` 將指示為必填。
value	number \| null	-	`input` 元素的已限制 `value`。