| import React, { useState } from 'react'; |
| import './SearchBar.css'; |
| |
| const SearchBar = ({ onSearch }) => { |
| const [query, setQuery] = useState(''); |
| |
| const handleSearch = () => onSearch(query); |
| const handleReset = () => { |
| setQuery(''); |
| onSearch(''); |
| }; |
| |
| return ( |
| <div className="search-bar"> |
| <input |
| type="text" |
| value={query} |
| onChange={e => setQuery(e.target.value)} |
| placeholder="输入要搜索的帖子" |
| className="search-input" |
| /> |
| <button onClick={handleSearch} className="search-btn">搜索</button> |
| <button onClick={handleReset} className="search-btn">重置</button> |
| </div> |
| ); |
| }; |
| |
| export default SearchBar; |