react实现一个带搜索带选择的input
时间: 2023-06-20 22:06:13 浏览: 54
可以使用Ant Design组件库中的AutoComplete组件来实现带搜索带选择的input,具体实现步骤如下:
1. 安装Ant Design组件库
```bash
npm install antd
```
2. 引入AutoComplete组件
```javascript
import { AutoComplete } from 'antd';
```
3. 在render函数中使用AutoComplete组件,并设置数据源和选项
```javascript
render() {
const dataSource = ['Apple', 'Banana', 'Orange'];
const options = dataSource.map((option) => {
return { value: option };
});
return (
<AutoComplete
options={options}
placeholder="请输入"
filterOption={(inputValue, option) =>
option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
/>
);
}
```
4. 根据需求自定义样式和行为
```javascript
render() {
const dataSource = ['Apple', 'Banana', 'Orange'];
const options = dataSource.map((option) => {
return { value: option };
});
return (
<AutoComplete
options={options}
placeholder="请输入"
filterOption={(inputValue, option) =>
option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
style={{ width: 200 }}
onSelect={(value) => console.log('onSelect', value)}
onSearch={(value) => console.log('onSearch', value)}
/>
);
}
```
以上是一个简单的带搜索带选择的input的实现步骤,你可以根据具体的需求进行自定义。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)