新しいCSSスタイルにレンダリングされませんでしたリアクト

Question

このユーザーのボックスをクリックすると、私のコードのロジックは、私はdrag-and-resize-box-text clicked を返しますtrue
とgetCssStyle()に状態activeを設定しますされ、その後、背景画像（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> 
    ); 
    } 
} 

devツールは背景画像が削除されていることを示していますが、ページにはまだ画像が表示されています
何が問題なのですか？

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>