css - Change state but don't change style Reactjs -
it's weird when try change style of section changing state when user mouseover button. content of h1 tag changed style of section isn't. me on that?
export class jumbotron extends component { constructor (props) { super(props) this.state = { style: { backgroundimage: 'none' } } this.handlesubjectmouseover = this.handlesubjectmouseover.bind(this) } handlesubjectmouseover (bg) { console.log(bg) this.setstate({ style: { backgroundimage: bg } }) } render () { return <section classname="jumbotron container" style= {this.state.style}> <h1>{this.state.style}</h1> <div classname="jumbotron-content"> <h2 style={{marginbottom: 3, margintop: 40}}>learning fun live</h2> <div style={{marginleft: 10}}>body ........</div> <div style={{marginbottom: 20, margintop: 80}} classname="subjects-title">top classes, tutorial & tips excel in: </div> <div classname="subjects" style={{backgroundimage: this.state.background}}> <raisedbutton label="math" secondary onmousemove={() => { this.handlesubjectmouseover(mathbg) }} /> <raisedbutton label="physics" secondary onmousemove={() => { this.handlesubjectmouseover(physicbg) }} /> <raisedbutton label="chemistry" secondary onmousemove={() => { this.handlesubjectmouseover(chemistrybg) }} /> <raisedbutton label="biology" secondary onmousemove={() => { this.handlesubjectmouseover(biologybg) }} /> <raisedbutton label="comp science" secondary onmousemove={() => { this.handlesubjectmouseover(computerbg) }} /> </div> </div> </section> }
use following line in place of setting background image
style={{'backgroundimage': 'url('+this.state.background+')'}}
to read more in details here & here.
and check css-loader issues webpack here.
hopes you!
Comments
Post a Comment