跳转到内容
编辑此页面

Select 选择属性

选择器组件能从一个选项列表中去获得用户所提供的信息。

简单的选择器

我们通常将菜单（Menus）放置在其所点击的元素上，这样的话能够确保当前选定的菜单项显示在点击的元素之上。

​
<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

高级功能

Select 组件的设计原理是和一个原生的 <select> 元素能够互相替代。

若您需要一个更优雅的功能，譬如 combobox，multiselect，autocomplete，async 或者 creatable support，请查看 Autocomplete 组件。 此组件旨在改进 “react-select” 和 “downshift” 这两个包。

属性

填充（Filled）和描边（outlined）变量

​
​

标签和助手文本

​

With label + helper text

None

Without label

自动宽度

​

其他属性

​

Disabled

​

Error

​

Read only

​

Required

原生选择器

为了提高用户体验，对于在移动设备上使用平台的原生选择器这样的模式，我们是支持的。

<FormControl fullWidth>
  <InputLabel htmlFor="uncontrolled-native">Age</InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>

TextField

TextField wrapper 组件是一个完整的表单控件，它包括了标签，输入和帮助文本。 您可以在 在此章节中 查看使用 select 模式的示例。

自定义选择器

你可以参考以下一些例子来自定义组件。 您可以在重写文档页中了解有关此内容的更多信息。

首先，需要设置 InputBase 组件的样式。 一旦设置好了样式，您就可以直接将其用作文本字段，也可以将其作为一个 select 字段提供给 select 组件的 input 属性。

​

🎨 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

多重选择

Select 组件也支持多项选择。 你可以通过使用 multiple 属性来启用它。

与单项选择一样，您可以通过访问 onChange 的回调函数中的 event.target.value 来提取新的值。 它总是以一个数组的形式出现。

默认值

​

选中标记

​

Chip

​

占位符

Placeholder

原生（Native）

可被控制的打开选择框

​

与对话框组件（Dialog）一起使用

虽然 Material Design 的规范不鼓励这样做，但您还是可以在对话框组件中使用选择器。

联动

可以和 ListSubheader 组件一起罗列分类，或者和原生的 <optgroup> 元素一起使用。

​

无障碍设计

若想正确的给 Select 加上标签，你的 input 控件需要一个额外的带有 label 的 id 属性。 id 的内容需要和 Select 的 labelId 值相同，例如：

<InputLabel id="label">年龄</InputLabel>
<Select labelId="label" id="select" value="20">
  <MenuItem value="10">10</MenuItem>
  <MenuItem value="20">20</MenuItem>
</Select>

或者，您也可以使用一个带有 id 和 label 的 TextField 组件来创建合适的标记和 id：

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

对于一个 原生选择器，你应该通过将选择元素的 id 属性的值赋给 InputLabel 的 htmlFor 属性来提及标签。

<InputLabel htmlFor="select">Age</InputLabel>
<NativeSelect id="select">
  <option value="10">Ten</option>
  <option value="20">Twenty</option>
</NativeSelect>

API