user2492364 user2492364 - 2 months ago 9
React JSX Question

React did not render new css style

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??

enter image description here

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

.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>