React没有呈现新的CSS风格(React did not render new css style)

这是我的代码逻辑，当用户单击该框时，我会将状态设置为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; }

This is my code logic, When user click the box , I will set the state active to true and getCssStyle() will return drag-and-resize-box-text clicked and then the background image(T) should disappear

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> ); } }

The dev tools show the background image is delete, but the page is still show the image What's wrong with this??

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; }