单击时更改按钮的样式 [英] Changing style of a button on click

问题描述

是否可以更改按钮 onClick 功能的 background-color?

例如.点击background-color: black，再次点击background-color: white

我试过类似 this.style 的东西，没有结果.

我已经设法让叠加层工作并在其中插入所需的数据.但没有设法找到任何可以帮助我的帖子.我正在使用反应引导程序.这是我的代码.

 const metaDataOverlay = (<div><style type="text/css">{`.btn-覆盖{背景颜色:白色；边距右:-15px；左边距:-15px；填充底部:-20px；填充:0；}`}</style><按钮工具栏><按钮组><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"/>

</a>

</按钮></OverlayTrigger></ButtonGroup></ButtonToolbar>

)

解决方案

您可以尝试使用 state 来存储颜色.也许这会给你解决问题的想法:

class Test 扩展 React.Component {构造函数(){极好的();this.state = {黑色:真实}}换颜色(){this.setState({黑色: !this.state.black})}使成为(){让 btn_class = this.state.black ?"blackButton": "whiteButton";返回 (<button className={btn_class} onClick={this.changeColor.bind(this)}>按钮)}}React.render(, document.getElementById('container'));

这是一个小提琴.

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'));

Here is a fiddle.

这篇关于单击时更改按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！