基于reactJS,实现类组件,拥有搜索框的picker
时间: 2024-09-06 12:04:53 浏览: 28
在React.js中,实现一个带有搜索框的Picker组件通常需要结合`@material-ui/core`或者其他UI库提供的Select组件,因为它们已经内置了搜索功能。下面是一个基于`@material-ui`的`Autocomplete`(自完成输入框)和`Menu`(菜单)构建搜索式Picker的基本示例:
```jsx
import React from 'react';
import { TextField, Menu } from '@material-ui/core';
const SearchablePicker = ({ options, onChange }) => {
const [searchText, setSearchText] = React.useState('');
const filteredOptions = options.filter(option =>
option.label.toLowerCase().includes(searchText.toLowerCase())
);
const handleOptionClick = (option) => {
setSearchText(''); // 清空搜索框
onChange(option);
};
return (
<>
<TextField
value={searchText}
onChange={(event) => setSearchText(event.target.value)}
placeholder="搜索..."
/>
<Menu open disableScrolling>
{filteredOptions.map((option) => (
<MenuItem key={option.id} onClick={() => handleOptionClick(option)}>
{option.label}
</MenuItem>
))}
</Menu>
</>
);
};
// 使用示例
<SearchablePicker
options={[
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2' },
... // 更多选项
]}
onChange={(selectedOption) => console.log('选中:', selectedOption)}
/>
```
在这个例子中,当用户在文本框中输入文字时,`filteredOptions`会被动态过滤,只显示匹配搜索文本的结果。点击任何一个结果时,搜索框将清空,并调用`onChange`回调函数传递所选的选项。