React没有呈现新的CSS样式

Question

这是我的代码逻辑，当用户点击该框时，我会将状态active设置为true
并getCssStyle()将返回drag-and-resize-box-text clicked 然后背景图像（T）应该消失

class Box extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    }
  }

  // decide which style to be used
  getCssStyle = (type) => {
    switch (type) {
      case 'text':
        if (this.state.active) {
          console.log("AAA")
          return 'drag-and-resize-box-text clicked'
        } else {
          console.log("BBB")
          return 'drag-and-resize-box-text';
        }
        // break;
      default:
      return '';
    }
  }

  onClick = () => {
    this.setState({active: true});  
  }

  render() {
    return (    
          <div className={this.getCssStyle(boxType)} >
            {this.boxFillContent()}
          </div>
      </div>
    );
  }
}

开发工具显示背景图片被删除，但页面仍然显示图像
这有什么问题？

CSS

.drag-and-resize-box-text{
  border: dashed 3px LightSeaGreen;
  background: url(../images/bottom/text_normal.png)  no-repeat;
  background-position:center;
  width: inherit;
  height: inherit;
}

.drag-and-resize-box-text.clicked{
  border: dashed 3px LightSeaGreen;
  /*background: url(../images/bottom/text_normal.png)  no-repeat;*/
  background-position:center;
  width: inherit;
  height: inherit;
}

Answer 1

.drag-and-resize-box-text.clicked应该有background：none。

使用

也可以使您的代码更简单

<div className={this.state.active ? 'drag-and-resize-box-text clicked' : 'drag-and-resize-box-text'} >
    {this.boxFillContent()}
</div>