SelectControl允许用户从单个或多个选项菜单中进行选择。它充当浏览器本机的包装器＜选择＞元素。
何时使用选择控件
在以下情况下使用选择控件：
- 您希望用户从列表中选择一个或多个选项。
- 有一个强大的默认选项。
- 几乎没有可用空间。
- 菜单隐藏部分的内容从其标签和所选项目中显而易见。例如，如果您有一个标签为“Month:”的选项菜单，其中选择了“January”项，则用户可以合理地推断该菜单包含一年中的12个月，而无需查看。
如果您有较短的选项列表，请考虑改用RadioControl。
做
如果有多个选项，请使用selects。
不要这样
对二元问题使用selects。
SelectControl包括一个双箭头指示器。菜单将分层显示在所选内容上。
打开和关闭
菜单显示在屏幕上后，它将保持打开状态，直到用户选择菜单项、单击菜单外部或切换到另一个浏览器选项卡。
标签
在SelectControl的上方或左侧使用大写字母标记文本标签。单击标签可以让用户直接关注所选内容。
做
将标签放置在选择项的上方或左侧。
不要这样
将标签居中放置在选定对象上，或与选定对象的侧面右对齐。
菜单项
- 菜单项应该简短，最好是单个单词，并使用句子大写。
- 不要在菜单项中使用完整的句子。
- 确保菜单项的排序方式对用户最有用。首选字母顺序或最近顺序。
做
使用短菜单项。
不要这样
在菜单中使用句子。
渲染用户界面以选择图像的大小。
从'react'导入{useState}；从“@wordpress/components”导入{SelectControl}；const MySelectControl=（）=>{const[size，setSize]=使用状态（“50%”）；返回(<选择控制label=“尺寸”值={size}选项={[{label:“大”，值：“100%”}，{标签：“中等”，值：“50%”}，{标签：“小”，值：“25%”}，] }onChange={（newSize）=>setSize（newSise）}__next无边距底部/>);};
呈现用户界面以从列表中选择多个用户。
<选择控制倍数label={__（'用户'）}value={this.state.users}//例如：value=['a'，'c']onChange={（用户）=>{this.setState（{users}）；} }选项={[{value:“”，label:“选择用户”，disabled:true}，{value:“a”，标签：“用户a”}，{value:“b”，标签：“用户b”}，{value:“c”，标签：“用户c”}，] }__next无边距底部/>
渲染用户界面以选择组中的项目
const[item，setItem]=使用状态（“”）；// ...<选择控制label={__（'我的恐龙'）}value=｛item｝//例如：value=“a”onChange={（selection）=>{setItem（selection）}}__next无边距底部><optgroup label=“Theropods”>霸王龙<option value=“Velociraptor”>速度龙<选项值=“Deinonychus”>Deinonythus</optgroup><optgroup label=“蜥脚类动物”><option value=“Diplodocus”>双球菌</option><option value=“Saltasaurus”>Saltasaurus</option><option value=“Apatosaurus”>无尾龙</optgroup></SelectControl>
- 组件可接受的支柱设置如下所示。
- 此集合中未包含的属性将应用于选定元素。
- 需要参考的一个重要道具是
价值.如果倍数是真实的,价值应该是包含所选选项值的数组。
- 如果
倍数是假,价值应等于所选选项的值。
标签
如果添加此属性，将使用label属性作为内容生成标签。
标签位置
标签的位置(顶部,边，或底部).
隐藏标签来自视觉
如果为true，标签将仅对屏幕阅读器可见。
帮助
如果添加此属性，将使用帮助属性作为内容生成帮助文本。
倍数
如果添加了此属性，则可以选择多个值。这个价值传递的应该是数组。
在大多数情况下，最好使用窗体标记字段或复选框控件而不是组件。
选项
包含以下属性以及任何其他属性的对象数组选项元素属性：
标签：（string）要显示给用户的标签。价值：（string）用于选择所选值的内部值。这也是选择选项时传递给onChange的值。禁用：（boolean）选项是否应具有disabled属性。- 类型：
阵列
- 必需：否
儿童
替代选项道具。
使用儿童属性可以更好地控制渲染项的样式，如选项组s或选项并可能避免由于上的引用更新而重新渲染选项道具。
–类型：反应节点
–必需：否
onChange（更改时）
接收被选为输入的新选项值的函数。
如果multiple为true，则接收的值是所选值的数组。
如果multiple为false，则接收到的值是具有新选择值的单个值。
价值
所选选项的值。如果倍数是真的价值应该是包含所选选项值的数组。
变体
控件的样式变量。
- 类型：
“默认”|“最小”
- 必需：否
- 违约：
“默认”
开始选择更大的默认高度，这将成为未来版本的默认大小。
开始选择新的无边距样式，这将成为未来版本的默认样式。
- 要从一个集合中选择一个选项，并且希望一次显示所有可用选项，请使用
收音机组件。
- 要从集合中选择一个或多个项目，请使用
复选框控件组件。
- 要打开或关闭单个设置，请使用
切换控件组件。