Выделите нажатую кнопку с помощью 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";
});
});
Разве вы не можете просто использовать псевдокласс active: попутного ветра следующим образом: bg-blue-400 active:bg-blue-600 или что вы подразумеваете под «активным»? Я думаю, что «активный» относится к незавершенному нажатию кнопки, поэтому его не следует повторно отображать во время «активного» состояния, потому что onClick срабатывает только после того, как вы отпустите щелчок мыши.
Добавил рабочий пример: omn6tu.csb.app
@maxeth Спасибо за объяснение, что означает активное состояние, тогда это не то, что я ищу. Я хочу изменить цвет фона ПОСЛЕ нажатия кнопки.
![[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]](https://cdn-images-1.medium.com/max/120/1*bunb02UuqTQf8phM9ZI1dg.png)
Ответы 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>
</>
);
};
Большое спасибо, это то, что я искал, у меня было состояние, но я не знал, как динамически добавлять стили. Единственная проблема заключается в том, что это выглядит очень грязно, так как у кнопки много стилей, которые должны быть включены в оба утверждения.
Мой общий подход к общим стилям попутного ветра — это комбинация пакета nom classnames (npmjs.com/package/classnames) и хранения общих классов в строковой переменной. Примерно так: const sharedClasses = "bg-white p-4..."; <button className = {classnames(sharedClasses, "m-4 rounded ...")}/>
Любые фрагменты кода, представляющие пример того, как это работает? Вы можете поместить рабочий пример в CodeSandbox