React中点击单个字母按钮仅修改其背景色的实现方法

问题根因 #

你现在所有字母按钮的样式都直接绑定了同一个全局状态bgColor，只要这个状态的值被更新为红色，所有引用该状态的按钮都会同步应用红色，自然就出现点一个按钮全组变色的问题。
不要用全局状态存具体的颜色值，应该把状态改成存储「当前选中的按钮标识值」，渲染每个按钮的时候单独判断：如果当前按钮的值和存储的选中标识一致，就给它加红色背景，其他按钮走默认样式。

具体修改步骤 #

• 调整state结构，替换原来的颜色状态
  把constructor里原来的bgColor状态，改成存选中按钮的value值，初始值设为all，匹配默认全量展示的逻辑：

  constructor(props) {
      super(props)
      this.state = {
          // 新增选中项状态，默认选中All按钮
          selectedBtnValue: "all"
      }
  }
  

• 给按钮单独绑定条件判断的样式
  给All按钮加选中样式判断：

  <button 
    value="all" 
    className="BrandPageList_AllButton" 
    onClick={this.handleClick}
    style={{backgroundColor: this.state.selectedBtnValue === 'all' ? 'red' : ''}}
  >
    All
  </button>
  

  给循环渲染的字母按钮替换原来的统一颜色绑定：

  <button
      disabled= {disbaled}
      value={item}
      key={index}
      block="BrandPageList_AlphabetButtons"
      mods = {{enabled : !disbaled}}
      onClick={this.handleClick}
      // 仅当前被选中的按钮应用红色背景
      style={{backgroundColor: this.state.selectedBtnValue === item ? 'red' : ''}}
  >
      {item}
  </button>
  

• 调整点击事件的状态更新逻辑
  把原来点击时设置bgColor: "red"的代码，改成把当前点击的按钮值存到selectedBtnValue里，同时处理All按钮的选中状态：

  handleClick = event =>{
      const brandValues = event.target.value
      if(brandValues === "all"){
          // 点击All时更新选中状态，保证All按钮显示高亮
          this.setState({ selectedBtnValue: "all" })
          return this.setAllBrands()
      }
      else{
          let brandSortDataByCharacter = this.state.brandSortData[brandValues]
          this.setState({
              allBrands: {
                  [brandValues]: brandSortDataByCharacter
              },
              // 存储当前点击的按钮值作为选中标识
              selectedBtnValue: brandValues
          })
      }
  }
  

顺带提个小bug：你初始化的字母字符串'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'里多打了一个E，缺了D，实际拆出来的字母列表会重复E、漏掉D，记得改成'ABCDEFGHIJKLMNOPQRSTUVWXYZ'。

内容的提问来源于stack exchange，提问作者user15765833