单击时更改按钮的样式

IT技术 reactjs react-bootstrap
2021-04-09 17:44:41

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

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

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

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

  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>
  )
6个回答

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

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

这是一个小提琴。

但是有了这个。除了在单击时更改颜色之外，您如何让按钮执行其他任何操作？假设你想触发一个函数......
2021-06-01 17:44:41
是的，它确实有帮助，我也发现此链接很有帮助，因为它有示例
2021-06-20 17:44:41

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

handleClick = (event) => {
   // accessible
   event.target.style
   event.target.classList //to change style via css
}
event.target.style.backgroundColor = "red" e.target.classList.add("mystyle");
2021-05-24 17:44:41
你能用黑白来完成这个吗
2021-05-28 17:44:41

这是另一个解决方案

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

如果你想要更动态，你可以用一些默认的样式值初始化状态后记使用 setState函数来更新你的状态

将此添加到您的工具提示

<Tooltip cursor={{ fill: 'transparent' }} />
其它你可能感兴趣的问题
上一篇React Native：如何结合外部和内联样式？ 下一篇如何在 Laravel 中使用 React Router？