单击时如何更改按钮的背景颜色

Question

我是 reactjs 和 javascript 的新手。当我单击字母表时，我有从 A 到 Z 的按钮列表，按钮的背景颜色应该改变。我试过下面的代码

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}
                >
                {item}
                </button>
            )}
                
            )}
        </div>
    )
}


handleClick = event =>{
    const brandValues = event.target.value
    if(brandValues === "all"){
        brandValues.style.backgroundColor = '#393939'
        return this.setAllBrands()
    }
    else{
        let brandSortDataByCharacter = this.state.brandSortData[brandValues]
       this.setState({
           allBrands:
               {
                   [brandValues]: brandSortDataByCharacter
               },
       })
    }
}

我无法更改背景颜色。如何解决这个问题。上面的代码是写在一个组件里面的。

Answer 1

更新您的 handleClick 事件处理程序

handleClick = event =>{
    const brand = event.target;
    if(brand.value === "all"){
        brand.style.backgroundColor = '#393939'
        return this.setAllBrands()
    }
    else{
        let brandSortDataByCharacter = this.state.brandSortData[brand.value]
       this.setState({
           allBrands:
               {
                   [brand.value]: brandSortDataByCharacter
               },
       })
    }
}

event.target 包含样式对象。

Answer 2

对于 React Js；

  var Button = React.createClass({
      getInitialState: function() {
        return {
          bgColor: 'red'
        }
        
      },
      
      handleClick: function() {
        this.setState({
          bgColor: 'blue'
        })
      },
      
      render : function() {
        return (
          <div>
            <button 
              onClick={this.handleClick} 
              style={{backgroundColor:this.state.bgColor}}>Button</button>
          </div>
        )
      }
    });
    
    ReactDOM.render(
      <Button />,
        document.getElementById('button')
    );
    `

对于 React Native，使用 Usestate 非常简单。

const [active, setActive] = useState(false);
  const Press1 = () => setActive(!active);

  const buttonTextStyle = {
    backgroundColor: active ? 'green' : 'red',
  };

在 React Native 中无需使用 Button，只需使用 Views 和 TouchableOpacity 创建您自己的可自定义按钮。

<TouchableOpacity style={{width: '50%'}} onPress={Press1}>
        <View style={buttonTextStyle}>
          <Text style={{textAlign: 'center', color: 'white'}}>
            Press Me
          </Text>
        </View>
      </TouchableOpacity>

希望它会起作用。