Изменение стиля кнопки при нажатии

Question

Можно ли изменить background-color моей кнопки onClick функция?

ex. нажмите 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> 
) 

Answer 1

Вы можете попробовать использовать состояние, чтобы сохранить цвет. Может быть, это даст вам идею, как решить эту проблему:

class Test extends React.Component { 
    constructor(){ 
     super(); 

     this.state = { 
       color_black: true 
     } 
    } 

    changeColor(){ 
     this.setState({color_black: !this.state.color_black}) 
    } 

    render(){ 
     let bgColor = this.state.color_black ? "black" : "white" 

     return (
      <div> 
       <button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button</button> 
      </div> 
     ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

Here is a fiddle.

Answer 2

Вы можете получить доступ к событию и текущей цели события

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