使用react写一个模糊搜索
时间: 2024-05-02 21:18:05 浏览: 10
以下是一个基于React的模糊搜索示例:
```jsx
import React, { useState } from "react";
const Search = () => {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const handleChange = event => {
setQuery(event.target.value);
if (event.target.value.length >= 2) {
fetch(`https://api.unsplash.com/search/photos?query=${event.target.value}&client_id=YOUR_ACCESS_KEY`)
.then(response => response.json())
.then(data => setResults(data.results));
} else {
setResults([]);
}
};
return (
<div>
<input type="text" value={query} onChange={handleChange} />
<ul>
{results.map(result => (
<li key={result.id}>
<img src={result.urls.thumb} alt={result.alt_description} />
<p>{result.description || result.alt_description}</p>
</li>
))}
</ul>
</div>
);
};
export default Search;
```
这个示例使用了Unsplash API进行搜索,并在输入框中输入至少两个字符后,通过fetch请求API获取搜索结果。在输入框中输入字符时,handleChange函数会被调用,并设置查询状态和结果状态。搜索结果将在ul元素中显示,并使用Unsplash API返回的图像和描述。