反应中的简单下拉过滤器?反应钩子

Question

我在 React 中有一个过滤器，它从 API 过滤世界各区域。但是我没有意识到你不能风格。

我想做一个基本的下拉菜单，我可以自己设置样式。

这是我的过滤器：

const Filters = ({ region, handleSearch, handleSelect }) => {
return (
<div className='filter-wrapper'>
<select className='filter-select' value={region} onChange={handleSelect}>
<option value=''>Search by Region</option>
<option value='Europe'>Europe</option>
<option value='Asia'>Asia</option>
<option value='Africa'>Africa</option>
<option value='Americas'>Americas</option>
<option value='Oceania'>Oceania</option>
</select>
</div>
);
};
export default Filters;

状态在主页中进行管理：

const [region, setRegion] = useState('');
const handleSelect = (event) => {
setRegion(event.target.value);
};
<Filters
region={region}
handleSelect={handleSelect}
/>

澄清一下，我不需要 css。 我想将其更改为允许我使用 css 的东西。例如，我想要相同的功能，但可以在实际生产应用程序中使用的下拉列表。

Answer 1

如果需要，您绝对可以自己设置<select>及其<options>样式。 使用像 react-select 这样的包可能更容易，但功能齐全的 React UI 组件库(如 antd(可能会更好。 当然，你可以重新发明轮子，但除非你想更新你的原始css，包括所有浏览器上的移动响应式设计，否则最好让久经考验的真正选项来完成繁重的工作。 您也可以始终自定义它们。