单击时更改按钮的样式

Question

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

前任。点击 background-color: black ，再点击 background-color: white

我试过类似 this.style ，没有结果。

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

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

原文由 user3350597 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试使用状态来存储颜色。也许这会给你如何解决问题的想法：

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

这是一个小提琴。

原文由 Boky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您还可以访问事件和事件的当前目标

handleClick = (event) => {
   // accessible
   event.target.style
   event.target.classList //to change style via css
}

原文由 Dmitriy Kovalenko 发布，翻译遵循 CC BY-SA 4.0 许可协议