选择框

Select 组件允许您创建选项列表供用户选择。

useOption API

导入

import { useOption } from '@mui/base/useOption';
// or
import { useOption } from '@mui/base';

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

参数

名称	类型	描述
禁用*	布尔值
标签*	字符串 \| React.ReactNode
值*	值
id	字符串
rootRef	React.Ref<Element>

返回值

名称	类型	描述
getRootProps	<ExternalProps extends Record<string, unknown>>(externalProps?: ExternalProps) => UseOptionRootSlotProps<ExternalProps>	根插槽属性的解析器。
高亮	布尔值	如果 `true`，则选项高亮显示。
索引	数字
rootRef	React.RefCallback<Element> \| null	根插槽 DOM 节点的 Ref。
已选择	布尔值	如果 `true`，则选项被选中。

useOptionContextStabilizer API

导入

import { useOptionContextStabilizer } from '@mui/base/useOption';
// or
import { useOptionContextStabilizer } from '@mui/base';

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

此 Hook 不接受任何输入参数。

返回值

名称	类型	描述

useSelect API

导入

import { useSelect } from '@mui/base/useSelect';
// or
import { useSelect } from '@mui/base';

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

参数

名称	类型	默认	描述
areOptionsEqual	(a: OptionValue, b: OptionValue) => boolean	-	用于确定两个选项值是否相等的函数。默认情况下，使用引用相等性。使用 `areOptionsEqual` 属性时，会产生性能影响（与选项数量成正比）。因此，建议尽可能使用默认的引用相等性比较。
buttonRef	React.Ref<Element>	-	触发按钮元素的 ref。
componentName	字符串	'useSelect'	使用 useSelect 的组件名称。用于调试目的。
defaultOpen	布尔值	false	如果 `true`，选择框将默认打开。
defaultValue	SelectValue<OptionValue, Multiple>	-	默认选定值。当组件不受控制时使用。
禁用	布尔值	false	如果 `true`，则禁用选择框。
getOptionAsString	(option: SelectOption<OptionValue>) => string	defaultOptionStringifier	用于将选项标签转换为字符串的函数。当标签是元素并且需要转换为纯文本以启用使用字符键进行键盘导航时，此功能很有用。
getSerializedValue	(option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.InputHTMLAttributes<HTMLInputElement>['value']	-	用于将当前选定的值转换为字符串的函数。用于设置与选择框关联的隐藏输入框的值，以便可以将选定的值与表单一起发布。
listboxId	字符串	-	Listbox 元素的 `id` 属性。
listboxRef	React.Ref<Element>	-	Listbox 元素的 ref。
multiple	Multiple	false	如果 `true`，最终用户可以选择多个值。这会影响 `value`、`defaultValue` 和 `onChange` 属性的类型。
name	字符串	-	隐藏输入元素的 `name` 属性。当选择框嵌入在表单中，并且您想要访问表单数据中的选定值时，此属性很有用。
onChange	(event: React.MouseEvent \| React.KeyboardEvent \| React.FocusEvent \| null, value: SelectValue<OptionValue, Multiple>) => void	-	当选项被选中时触发的回调。
onHighlightChange	(event: React.MouseEvent<Element, MouseEvent> \| React.KeyboardEvent<Element> \| React.FocusEvent<Element, Element> \| null, highlighted: OptionValue \| null) => void	-	当选项被高亮显示时触发的回调。
onOpenChange	(open: boolean) => void	-	当 listbox 打开或关闭时触发的回调。
open	布尔值	-	控制选择框的 listbox 的打开状态。这是 `defaultOpen` 属性的受控等效项。
options	ReadonlyArray<SelectOptionDefinition<OptionValue>>	-	指定选项的另一种方法。如果设置了此参数，则定义为 JSX 子项的选项将被忽略。
required	布尔值	-	如果 `true`，则嵌入在表单中的选择框必须具有选定的值。否则，表单提交将失败。
值	SelectValue<OptionValue, Multiple>	-	选定的值。设置为 `null` 以取消选择所有选项。

返回值

名称	类型	描述
buttonActive	布尔值	如果 `true`，则触发按钮处于活动状态（按下）。
buttonFocusVisible	布尔值	如果 `true`，则触发按钮具有可见的焦点。
buttonRef	React.RefCallback<Element> \| null	按钮插槽 DOM 节点的 Ref。
contextValue	SelectProviderValue<Value>	要传递给 `SelectProvider` 组件的值。
禁用	布尔值	如果 `true`，则禁用选择框。
dispatch	(action: ListAction<Value> \| SelectAction<Value>) => void	选择框组件的操作分发器。允许以编程方式控制选择框。
getButtonProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectButtonSlotProps<ExternalProps>	按钮插槽属性的解析器。
getHiddenInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectHiddenInputSlotProps<ExternalProps>	隐藏输入插槽属性的解析器。
getListboxProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSelectListboxSlotProps<ExternalProps>	Listbox 插槽属性的解析器。
getOptionMetadata	(optionValue: Value) => SelectOption<Value> \| undefined	返回具有给定值的选项的元数据的函数。
highlightedOption	Value \| null	高亮显示选项的值。
listboxRef	React.RefCallback<Element> \| null	Listbox 插槽 DOM 节点的 Ref。
open	布尔值	如果 `true`，则 listbox 打开。
options	Value[]	所有已注册选项的值。
值	SelectValue<Value, Multiple>	所选选项的值。