是否可以更改按钮onClick
函数的background-color
?
例如。单击背景颜色:黑色
,再次单击背景颜色:白色
我尝试过类似 this.style
的方法,但没有结果。
我已经成功地使覆盖工作并在其中插入所需的数据。 但没有找到任何可以帮助我的帖子。 我正在使用 react 引导。 这是我的代码。
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>
)
最佳答案
您可以尝试使用状态来存储颜色。也许这会让您知道如何解决问题:
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'));
关于reactjs - 单击时更改按钮的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41978408/