Is it possible to change background-color
of my button onClick
function?
ex. click background-color: black
, another click background-color: white
I've tried something like this.style
, no result.
I've managed to get overlay working and insert needed data inside of it. But didn't managed to find any post that could help me. I am using react-bootstrap. This is my code.
const metaDataOverlay = (
<div>
<style type="text/css">{`
.btn-overlay {
background-color: white;
margin-right: -15px;
margin-left: -15px;
padding-bottom: -20px;
padding: 0;
}
`}</style>
<ButtonToolbar>
<ButtonGroup>
<OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}>
<Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }>
<div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
<a href={url} onClick={(e)=>{e.preventDefault(); console.log("123")}}>
<div>
<img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/>
</div>
</a>
</div>
</Button>
</OverlayTrigger>
</ButtonGroup>
</ButtonToolbar>
</div>
)
You can try to use state to store the color. Maybe this would give you the idea how to solve the problem :
class Test extends React.Component {
constructor(){
super();
this.state = {
black: true
}
}
changeColor(){
this.setState({black: !this.state.black})
}
render(){
let btn_class = this.state.black ? "blackButton" : "whiteButton";
return (
<button className={btn_class} onClick={this.changeColor.bind(this)}>
Button
</button>
)
}
}
React.render(<Test />, document.getElementById('container'));