클릭 시 버튼 유형 변경

클릭 시 버튼 유형 변경

변경할 수 있습니까?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>
  )

상태를 사용하여 색상을 저장할 수 있습니다.아마도 이것은 당신에게 문제를 해결하는 방법을 줄 것이다.

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

여기 바이올린이 있습니다.

또한 이벤트와 이벤트의 현재 대상에 액세스할 수 있습니다.

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

여기 또 다른 해결책이 있습니다.

changeStyles = () => {
    let element = document.getElementById('button')
    ReactDOM.findDOMNode(element).style.backgroundColor = this.state.isClicked?'black' : 'white'
}

이 방법으로 CSS에서 중복을 방지하기 위해 필요한 스타일 속성만 변경할 수 있습니다.

이렇게 하면

    handleClick=(e)=>{
        console.log("this is working fine");
        e.preventDefault();
        e.target.style.color = 'black'
        console.log(e.target);
    }

보다 동적으로 상태를 초기화할 경우 style afterwords 기본값에서 setState 함수를 사용하여 상태를 업데이트할 수 있습니다.

툴팁에 추가

<Tooltip cursor={{ fill: 'transparent' }} />

다음은 다른 해결 방법입니다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
      BackgroundColor: "BLACK"};
  };

render(){
    return (
      <div className='app'>
        <button className={this.state.BackgroundColor === "BLACK" ? "Black" : "nothing"}
        onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
        <button className={this.state.BackgroundColor === "WHITE" ? "White" : "nothing"}
        onClick={() => {this.setState({BackgroundColor: "BLACK"})}}>CHANGE TO WHITE</button>
      </div>
    );
  }
}

export default App;

이 코드를 사용하면 이전 검은색 버튼을 숨기고 흰색 배경의 새 버튼으로 변경할 수 있습니다.이 기능은 새로운 흰색 버튼에서도 작동합니다.반복하지 않고 버튼의 배경색만 변경하고 싶다면 렌더에서 조건부 상태 변경을 시도할 수도 있습니다.

render(){
    return (
      <div className='app'>
        <button className={this.state.BackgroundColor === "BLACK" ? "Black" : "White"}
        onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
      </div>
    );
  }
}

CSS는 다음과 같습니다.

*{
  margin: 0;
  padding: 0;
 }

.app{
  display: flex;
  justify-content: center;
  align-items: center;
}
.Black{
  background-color: black;
  color: white;
}

.White{
  background-color: white;
  color: black;
}

.nothing{
  display: none;
}

언급URL : https://stackoverflow.com/questions/41978408/changing-style-of-a-button-on-click