使用 css 在反應中單擊按鈕時如何更改按鈕的樣式？

Question

基本上，目前我的卡片在懸停時會改變樣式，但我希望在單擊時執行相同的樣式。 我嘗試過使用：active 和：focus 但這似乎只會改變樣式，直到單擊該卡為止。

這是我的倉庫的鏈接： https://github.com/abhudaym/soundboard

這是我的 App.js

import React from 'react';
import useSound from 'use-sound';
import Slider from 'react-slick';
import logo from './logo.svg';
import snare from './sounds/snare.mp3';
import './App.css';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

import 'bootstrap/dist/css/bootstrap.css';
import rollingChair from './sounds/rolling-office-chair.wav';
import quietOffice from './sounds/office-quiet.mp3';
import busyOffice from './sounds/busy-office.wav';
import officeTyping from './sounds/office-typing.wav';
import phone from './sounds/phone.wav';
import ac from './sounds/ac.wav';
import coffeeMachine from './sounds/coffeeMachine.wav';
import photocopier from './sounds/photocopier.wav';
import rainOnWindows from './sounds/rainOnWindows.wav';

function App() {
  const [play1, { stop1 }] = useSound(rollingChair);
  const [play2, { stop2 }] = useSound(quietOffice);
  const [play3, { stop3 }] = useSound(busyOffice);
  const [play4, { stop4 }] = useSound(officeTyping);
  const [play5, { stop5 }] = useSound(phone);
  const [play6, { stop6 }] = useSound(ac);
  const [play7, { stop7 }] = useSound(coffeeMachine);
  const [play8, { stop8 }] = useSound(photocopier);
  const [play9, { stop9 }] = useSound(rainOnWindows);
  const [playSnare, { stopSnare }] = useSound(snare);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: false,
  };

  return (
    <section id='services' className='services'>
      <div className='container text-center my-auto'>
        <Slider {...settings}>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
          <div className='mb-5 mb-lg-0 row'>
            <button onClick={play1} onMouseLeave={stop1}>
              <div className='icon-box' data-aos='fade-up' data-aos-delay='100'>
                <div className='icon'>
                  <i className='fas fa-robot'></i>
                </div>
                Sound-1
              </div>
            </button>
          </div>
        </Slider>
      </div>
    </section>
  );
}

export default App;

這是我的 App.css

body{
  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}

.services .icon-box {
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
}

.services .icon-box::before {
  content: '';
  position: absolute;
  background: #e1f0fa;
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
}

.services .icon-box:hover::before {
  background: #3498db;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.services .icon {
  margin: 0 auto 20px auto;
  padding-top: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #3498db;
  transition: all 0.3s ease-in-out;
}

.services .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.services .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.services .title a {
  color: #111;
}

.services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.services .icon-box:active .title a, .services .icon-box:active .description {
  color: #fff;
}

.services .icon-box:active .icon {
  background: #fff;
}

.services .icon-box:active .icon i {
  color: #3498db;
}

.row{
  padding: 50px 20px 20px 0px;
}

.r2{
  padding-top: 0px !important;
}

Answer 1

完成你想要的最好的方法是當你點擊包含相同 styles 的卡時，將“活動” class 添加到卡中:hover 。 這樣，您可以隨時保持風格

Answer 2

如果樣式需要在頁面刷新之前出現，您可以使用 state 並添加額外的 class 來實現此目的

const [buttonClicked,setButtonClicked]=useState({button1:false,button2:false,button3:false});

默認情況下，這將有一個 boolean 值 false 用於設置初始按鈕將保持未單擊狀態。

在按鈕單擊期間有一個 function 像`

onButtonClick = (clickedButtonName){
 setButtonClicked({...buttonClicked,[clickedButtonName]:true })}

從渲染發送名稱為 button1,button2

 <button onClick={()=>onButtonClick('button1)} onMouseLeave={stop1}>

現在使用 state buttonClicked在渲染方法中添加額外的 class

 <button class={`${buttonClicked.button1?'button-active':''}`} onClick={()=>onButtonClick('button1)} onMouseLeave={stop1}>

現在，如果單擊該按鈕，它將具有活動的 class 作為按鈕活動，您可以添加一個 class按鈕活動並應用相同的 ZBC4150D023D3255136DB671D61AC93F2DF2Z，如 ZE05482ZF5F79