单击激活按钮切换类

时间:2018-09-20 17:56:14

标签: javascript reactjs

我有这个按钮

<ChartButton className={this.state.GPUClicked === 0 ? ' toggled' : ''}onClick={() => this.handleGPUChart(0, 'GPU 1')}>GPU 1</ChartButton>

点击时会触发

    handleGPUChart = (num, title) => {
    this.setState({
        GPU1: num,
        GPUTitle: title,
        GPUClicked: num
    })
}

这是此按钮的CSS

    export const ChartButton = styled.button`
  background-color: #5BB081;
  border: none;
  outline: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  white-space: nowrap;
  cursor: pointer;
  .toggled {
    background-color: #636863;
    font-size: 15px;
  }
`

我在这里想念什么?我希望按钮在单击时切换以切换,我认为在ChartButton组件中具有className的名称是有意义的。我正在为此扯头发...非常感谢。

1 个答案:

答案 0 :(得分:1)

请确保您只需要在附加课程前添加&即可。

select t1.column_b,
       (case when t2.column_e = 'Y' then t1.column_c end) as column_c
from table1 t1 left join
     table2 t2
     on t1.id = t2.id;