单击时更改按钮的颜色？（反应 + 引导）答案

【问题标题】：Changing Color of Button on Click? (React + Bootstrap)单击时更改按钮的颜色？（反应 + 引导）
【发布时间】：2023-03-09 21:25:01
【问题描述】：

我正在尝试创建类似于 Reddit 的赞成和反对系统的“赞成/反对”赞许和反对。

如果单击竖起大拇指，我希望能够将对象的状态/颜色更改为绿色；如果单击竖起大拇指，我希望能够将对象的状态/颜色更改为红色。

但是，我不希望用户能够单击两次大拇指并从绿色变为默认白色...有什么想法吗？

class Counter extends React.Component {
constructor(props) {
    super(props);
    this.state = {counter: 0}
}

increment = (e) => {
    e.preventDefault();
    this.setState({
        counter: this.state.counter + 1
    });
}

decrement = (e) => {
    e.preventDefault();
    this.setState({
        counter: this.state.counter - 1
    });
}

render() {
    return (
        <div className="voting">
            {this.state.counter}
            <button className="upvoteBtn" type="submit" onClick={this.increment}>
                <i className="fa fa-thumbs-up ml-2 mr-2"/>
            </button>
            <button className="downvoteBtn" type="submit" onClick={this.decrement}>
                <i className="fa fa-thumbs-down ml-2 mr-2"/>
            </button>
        </div>
    )
}
}

【问题讨论】：

标签： javascript css reactjs bootstrap-4 font-awesome

【解决方案1】：

这可能会给你一个想法。单击向上或向下按钮后，它将禁用这两个按钮。您还可以在 handleUp 和 handleDown 中实现您的计数器功能：

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      colorUp: 'secondary',
      colorDown:  'secondary',
      clicked: false
    };

    this.handleUp = this.handleUp.bind(this);
    this.handleDown = this.handleDown.bind(this);
  }

  handleUp(event) {
  if (this.state.clicked === false) {
    this.setState({
      colorUp: 'success',
      clicked: true
    });
   }
  }

  handleDown(event) {
  if (this.state.clicked === false) {
    this.setState({
      colorDown: 'danger',
      clicked: true
    });
    }
  }

  render() {
    return (
    <div>
        <ReactBootstrap.Button className='ml-3' variant={this.state.colorUp} onClick={this.handleUp} disabled={this.state.clicked}>Up</ReactBootstrap.Button>
        <ReactBootstrap.Button className='ml-3' variant={this.state.colorDown} onClick={this.handleDown}  disabled={this.state.clicked}>Down</ReactBootstrap.Button>
        </div>
    );
  }
}

ReactDOM.render(
  <Sample />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">

<div id="root" />

【讨论】：