單擊按鈕時如何更改文本顏色

Question

我有一個從 A 到 Z 的按鈕列表，當特定字母有任何品牌時，只有一些按鈕會突出顯示。 當我點擊一個特定的字母時，該按鈕的文本顏色應該會改變。 我嘗試了下面的代碼，但它刪除了其他按鈕和禁用按鈕的突出顯示顏色

constructor(props) {
    super(props)
    this.state = {
        selectedButton :  true
    }
}
getBrandSortData(){
    let btn_class = this.state.black ? "blackButton" : "whiteButton";
    return(
        <div className="BrandPageList_AlphabetContainer">
            <button value="all" className="BrandPageList_AllButton" onClick={this.handleClick}>All</button>
            {brandList.map((item,index) => 
            {
                let disbaled = !this.isBrandCharacterAvailable(item)
                return(
                    <button 
                    disabled= {disbaled}
                    value={item} 
                    key={index} 
                    block="BrandPageList_AlphabetButtons"
                    mods = {{enabled : !disbaled}}
                    onClick={this.handleClick}
                    className={btn_class}
                >
                {item}
                </button>
            )}
                
            )}
        </div>
    )
}
 handleClick = event =>{
    const brandValues = event.target.value
    if(brandValues === "all"){
        return this.setAllBrands()
    }
    else{
        let brandSortDataByCharacter = this.state.brandSortData[brandValues]
       this.setState({
           allBrands:
               {
                   [brandValues]: brandSortDataByCharacter,
                   selectedButton: !this.state.selectedButton
               },
       })
    }
}

我有以下 css 文件

 .blackButton{
    color: white;
  }
  
  .whiteButton{
    color: black;
  }

如何更改文本的顏色，如鏈接所示

Answer 1

您需要創建一個單獨的按鈕組件，以便在每次將更改應用於子項時不重新呈現整個父項...

import { useState ) from 'react';

..

const Button = ({ clickCallback, initClass }) {
  const [ state, setState ] = useState(initClass);

  const toggleColor = () => {
    setState(state === 'whiteButton' ? 'blackButton' : 'whiteButton' );
  }

  const handleClick = () => {
    clickCallback(toggleColor);
  }

  render(
    <button className={ state } onClick={ handleClick } ></button>
  );
}

..

並在父母

import Button from 'location'; // button component

..

// inside the parent component

const clickCallback = toggleColor => {
  this.state.activeButton && this.state.activeButton();
  this.state.activeButton = toggleColor;
}

..

// and in the render

<Button clickCallback={ clickCallback } initClass={ btn_class } />

當然這是一個縮小的例子，添加你需要的屬性