SearchControl 组件允许用户显示搜索控件。
查看 Storybook 页面 以对该组件进行可视化探索。
开发指南
用法
渲染一个用于输入附加 CSS 类名的用户界面。
import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { SearchControl } from '@wordpress/components';
function MySearchControl( { className, setState } ) {
const [ searchInput, setSearchInput ] = useState( '' );
return (
<SearchControl
label={ __( 'Search posts' ) }
value={ searchInput }
onChange={ setSearchInput }
/>
);
}
属性（Props）
该组件接受的属性集将在下方指定。
未包含在此集合中的属性将被应用于输入元素。
label
输入的无障碍标签。
作为无障碍最佳实践，即使定义了占位符且 hideLabelFromVision 为 true，也应始终提供标签。
- 类型：
String - 必需：否
- 默认值：
__( 'Search' )
placeholder
如果添加此属性，将为输入使用特定的占位符文本。
- 类型：
String - 必需：否
- 默认值：
__( 'Search' )
value
输入的当前值。
- 类型：
String - 必需：否
className
将添加到包装 div 的类列表中的类。
- 类型：
String - 必需：否
onChange
接收输入值的函数。
- 类型：
function - 必需：是
onClose
注意：此属性已弃用。
当提供 onClose 回调时，搜索控件将呈现一个关闭按钮，触发给定的回调。
如果您希望该按钮触发您自己的逻辑来完全关闭搜索字段，而不仅仅是清除输入值，请使用此属性。
- 类型：
function - 必需：否
help
如果添加此属性，将使用 help 属性作为内容生成帮助文本。
- 类型：
String|Element - 必需：否
hideLabelFromVision
如果为 true，标签将不可见，但会被屏幕阅读器读取。默认为 true。
- 类型：
Boolean - 必需：否
- 默认值：
true
size: ‘default’ | ‘compact’
组件的大小。
- 必需：否
- 默认值：
'default'
相关组件
- 为了向用户提供更多受限的输入选项，请使用 TextControl、SelectControl、RadioControl、CheckboxControl 或 RangeControl。