如何在反應引導程序中單擊時更改按鈕樣式

Question

我有一個切換按鈕，我想在其中添加自己的樣式，我希望按鈕在被選中時改變顏色，但是當前代碼的問題是當按下按鈕時顏色會改變為所需的結果但是作為一旦我松開點擊按鈕，按鈕顏色就會恢復到默認樣式。 有人可以幫我解決這個問題嗎

我的反應組件

import React, { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import '../styles/components/_LoanType.scss';

const LoanType:React.VFC = () => {
    const [selectedButton, setSelectedButtonValue] = useState<string>('fixedRateLoan');
    const handleChange = (value:string) => {
        selectedButton(value);
    }

    return (
        <div className="loan-type">
            <ToggleButtonGroup type="radio" name="radio" value={selectedButton} onChange={handleChange} >
                <ToggleButton value={'frl'}>1</ToggleButton>
                <ToggleButton value={'vrl'}>2</ToggleButton>
                <ToggleButton value={'spl'}>3</ToggleButton>
            </ToggleButtonGroup>
        </div>
    );
}

export default LoanType;

我的 scss 文件：

.pkg .calc {
    .ci .lts{
        .loan-type {
            .btn-group{
         

   display: flex;
            .btn-primary{
                text-align: center;
                background-color: #ffffff;
                color: #656565;
                font-weight: 900;
                &:active{
                    color: #ffffff;
                    background-color: #656565;
                }
            }        
        }
    }
}

}

Answer 1

首先，您的組件中存在一些錯誤。

在更改處理程序中，您將當前的 state 稱為 function，而不是更新 state 的 function。

const handleChange = (value:string) => {
    selectedButton(value);
}

應該

const handleChange = (value:string) => {
    setSelectedButtonValue(value);
}

其次， <ToggleButton>的文檔指出單擊按鈕切換輸入需要一個id 。 所以你應該將它添加到按鈕中，例如

<ToggleButton id="frl" value={"frl"}>
  1
</ToggleButton>
<ToggleButton id="vrl" value={"vrl"}>
  2
</ToggleButton>
<ToggleButton id="spl" value={"spl"}>
  3
</ToggleButton>

您還使用不是選項的值初始化 state。 也許這應該設置為 frl、vrl 或 spl？

useState<string>('frl');

希望這可以幫助！