陣營並沒有呈現新的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和調整大小盒，text.clicked應該有背景：無。

而且你的代碼可以通過使用

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