새로운 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>