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; }最满意答案
.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>.drag-and-resize-box-text.clicked should have background: none.
Also your code could be made much simpler by using
<div className={this.state.active ? 'drag-and-resize-box-text clicked' : 'drag-and-resize-box-text'} > {this.boxFillContent()} </div>更多推荐
发布评论