react写一个可输入查询的下拉列表
时间: 2024-05-15 17:16:08 浏览: 7
以下是一个简单的 React 下拉列表代码,它允许用户在输入框中输入查询,并根据用户输入的字符动态更新下拉列表:
```javascript
import React, { useState } from "react";
const Dropdown = ({ options }) => {
const [query, setQuery] = useState("");
const [filteredOptions, setFilteredOptions] = useState(options);
const handleInputChange = (e) => {
const value = e.target.value;
setQuery(value);
const filtered = options.filter((option) =>
option.toLowerCase().includes(value.toLowerCase())
);
setFilteredOptions(filtered);
};
return (
<div className="dropdown">
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Search..."
/>
{filteredOptions.length > 0 && (
<ul>
{filteredOptions.map((option) => (
<li key={option}>{option}</li>
))}
</ul>
)}
</div>
);
};
export default Dropdown;
```
此代码中的 Dropdown 组件接受一个名为 options 的数组作为输入,并在输入框中允许用户输入查询。 每当用户输入一个字符时,handleInputChange 函数将被调用,并根据查询字符串过滤选项数组。 然后,过滤后的选项将用于动态更新下拉列表中的选项。