可以更改background-color按钮onClick功能吗?
background-color
onClick
例如 点击background-color: black,再点击一次background-color: white
background-color: black
background-color: white
我已经尝试过类似this.style,但没有结果。
this.style
我设法使叠加工作并在其中插入所需的数据。但是没有找到任何可以帮助我的帖子。我正在使用react-bootstrap。这是我的代码。
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'));
这是一个小提琴。