单击时如何更改按钮颜色答案

【问题标题】：How to change the button colour when it is clicked单击时如何更改按钮颜色
【发布时间】：2021-07-21 18:40:12
【问题描述】：

当我点击特定字母时，我有这组从 A 到 Z 的按钮，与该字母相关的品牌会弹出。我已经尝试了下面的代码，但是当我只单击一个按钮时它正在申请所有按钮。我该如何解决它

let brandList = 'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split("");

constructor(props) {
    super(props)
    this.state = {
        bgColor: ""
    }
}

getBrandSortData(){
    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}
                            style={{backgroundColor: this.state.bgColor}}
                        >
                            {item}
                        </button>
                    )}

            )}
        </div>
    )
}

handleClick = event =>{
    const brandValues = event.target.value
    if(brandValues === "all"){
        console.log()
        return this.setAllBrands()
    }
    else{
        let brandSortDataByCharacter = this.state.brandSortData[brandValues]
        this.setState({
            allBrands:
                {
                    [brandValues]: brandSortDataByCharacter
                },
            bgColor: "red"
        })
    }
}

这是图片提前谢谢

【问题讨论】：

您可以使用“this”关键字来引用当前元素。
@AbhishekPratapSingh 我应该在哪里使用“this”关键字
我看到的另一种方式是将每个字符的状态保存为像{A: false, B:true, C:false}这样的对象
是的，某些字符被禁用，因为它没有任何与字符相关的品牌

标签： javascript css reactjs ecmascript-6

【解决方案1】：

您可以在渲染时将字母传递给点击处理程序，而不是使用event 对象来确定您单击了哪个字母。

下面是一个示例，说明如何实现这一目标。我正在使用带有钩子的功能组件，因为这是推荐的方式，但您可以在类组件中执行相同的操作：

const Alphabet = () => {
  const [active, setActive] = useState();
  return (
    <div className='alphabet'>
      {'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(char => (
        <div 
          className={`letter ${char === active ? 'active' : ''}`}
          onClick={() => setActive(char)}>{char}</div>
      ))}
    </div>
  );
};

这是live example

【讨论】：