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

您绝对可以if you want为<select>及其<options>设置样式。使用像react-select这样的包可能会更容易，但是使用功能完善的React UI组件库（例如antd）可能会更好。当然，您可以重新发明轮子，但是除非您要更新原始的CSS，包括在所有浏览器上针对移动设备的响应式设计，否则最好让经过尝试和真实的选择来承担繁重的工作。您也可以随时对其进行自定义。

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

1 个答案: