Блог

Я внедрил фильтр по категории в свое приложение, поэтому, если вы нажмете на кнопку, она отфильтрует указанную категорию. Я хотел бы также изменить цвет фона кнопки, когда пользователь нажимает на нее, чтобы вы могли визуально видеть, какая категория выбрана.

Я использую стилизованные компоненты для стилизации, но я не могу получить доступ к состоянию в стилизованном компоненте, поэтому я не знаю, с чем я могу сравнить, нажата она или нет.

Я попробовал это с помощью реквизитов в стилизованных компонентах, но у меня это не сработало. Итак, вопрос в том, какой самый простой способ изменить фон кнопки, когда кнопка активна.

Код здесь: https://codesandbox.io/s/currying-flower-nui32?file=/src/App.js

Вы не можете использовать key в качестве реквизита, так как он используется react внутренне.

Вы можете просто установить другую опору и обратиться к ней, и она будет работать:

 <StyledButton
  category={category}
  buttonCategory={item} //new prop
  key={item}
  onClick={() => {
    setCategory(item);
  }}
>
 

Затем просто обновите свой троичный:

 prop.buttonCategory === prop.category ? "#23d997" : null;