Выделите нажатую кнопку с помощью React/Tailwind

Я хочу изменить внешний вид кнопки после ее нажатия. Я попытался добавить focus:/active:, но реакция повторно отображает компонент по щелчку, поэтому он не работает.

В Javascript я бы добавил обработчик событий для каждой кнопки, которая автоматически меняет внешний вид после нажатия, как я могу воссоздать это в react/tailwind-css, поскольку tailwind не работает с динамическими изменениями className?

Есть ли хорошая практика, или я должен добавить операторы if, чтобы заставить его работать?

Это то, что я пытаюсь воссоздать.

HTML:
<button>MY BUTTON</button>
<button>MY BUTTON</button>
<button>MY BUTTON</button>
JS:
let button_list = document.querySelectorAll("button");
button_list.forEach(element=>{
  element.addEventListener("click",function(){
    button_list.forEach(remove_background=>{
      remove_background.style.background = "white";
    });
    this.style.background = "black";
  });
});

Любые фрагменты кода, представляющие пример того, как это работает? Вы можете поместить рабочий пример в CodeSandbox

Barjuan Davis 21.11.2022 09:24

Разве вы не можете просто использовать псевдокласс active: попутного ветра следующим образом: bg-blue-400 active:bg-blue-600 или что вы подразумеваете под «активным»? Я думаю, что «активный» относится к незавершенному нажатию кнопки, поэтому его не следует повторно отображать во время «активного» состояния, потому что onClick срабатывает только после того, как вы отпустите щелчок мыши.

maxeth 21.11.2022 09:27

Добавил рабочий пример: omn6tu.csb.app

O'con 21.11.2022 09:41

@maxeth Спасибо за объяснение, что означает активное состояние, тогда это не то, что я ищу. Я хочу изменить цвет фона ПОСЛЕ нажатия кнопки.

O'con 21.11.2022 09:42
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
На этом сегодня все, завтра снова увидимся с новым проектом!
1
4
186
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы рекомендовал переменную состояния для хранения активной кнопки. Вот простой пример:

const ButtonList = () => {
  const [activeButtonIndex, setActiveButtonIndex] = useState(0);
  return (
    <>
      <button
        className = {activeButtonIndex === 0 ? "bg-white" : "bg-black"}
        onClick = {() => setActiveButtonIndex(0)}
      >
        My Button
      </button>
      <button
        className = {activeButtonIndex === 1 ? "bg-white" : "bg-black"}
        onClick = {() => setActiveButtonIndex(1)}
      >
        My Button
      </button>
      <button
        className = {activeButtonIndex === 2 ? "bg-white" : "bg-black"}
        onClick = {() => setActiveButtonIndex(2)}
      >
        My Button
      </button>
    </>
  );
};

Большое спасибо, это то, что я искал, у меня было состояние, но я не знал, как динамически добавлять стили. Единственная проблема заключается в том, что это выглядит очень грязно, так как у кнопки много стилей, которые должны быть включены в оба утверждения.

O'con 21.11.2022 10:17

Мой общий подход к общим стилям попутного ветра — это комбинация пакета nom classnames (npmjs.com/package/classnames) и хранения общих классов в строковой переменной. Примерно так: const sharedClasses = "bg-white p-4..."; <button className = {classnames(sharedClasses, "m-4 rounded ...")}/>

tstrmn 21.11.2022 11:23

Другие вопросы по теме