使用 onClick ReactJS 更改 2 个按钮颜色答案

【问题标题】：Change 2 Buttons Color with onClick ReactJS使用 onClick ReactJS 更改 2 个按钮颜色
【发布时间】：2021-01-03 12:17:41
【问题描述】：

我正在使用 material-ui 的 Button 和 ButtonGroup。我想根据按下的按钮更改每个按钮的颜色（查看活动过滤器）这是我的代码：

   <ButtonGroup variant="contained" aria-label="contained primary button group" >
         <Button value={false} variant="contained" onClick={this.sortOnChange} color={this.state.relevanceColor}>Most Recent</Button>
         <Button value={true} variant="contained" onClick={this.sortOnChange} color={this.state.recentColor}>Most Relevant</Button>
   </ButtonGroup>

这是 sortOnChange 函数：

   sortOnChange = (event) => {
    const value = event.currentTarget.value;
    console.log(value);
    let recent;
    let relevance;
    if(value){
        recent= "secondary";
        relevance="primary";
    }else {
        recent="primary";
        relevance="secondary";
    }
    this.setState({relevanceColor: relevance, recentColor: recent}, function () {
            this.updateResults();
    }); 
}

updateResults 函数现在什么都不做。

状态是：

        relevanceColor: "primary",
        recentColor: "secondary",

由于某种原因，颜色根本没有改变。

我怎样才能做到这一点，以便当您单击一个选项时，它们都会改变颜色，以便单击的按钮获得“主要”颜色，而“未点击”按钮获得“次要”颜色。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：


sortOnChange = (value) => {
  let recent;
  let relevance;
  if (value) {
    recent = "secondary";
    relevance = "primary";
  } else {
    recent = "primary";
    relevance = "secondary";
  }
  this.setState({ relevanceColor: relevance, recentColor: recent }, function() {
    this.updateResults();
  });
};

<ButtonGroup variant="contained" aria-label="contained primary button group">
  <Button
    variant="contained"
    onClick={() => this.sortOnChange(false)}
    color={this.state.relevanceColor}
  >
    Most Recent
  </Button>
  <Button
    variant="contained"
    onClick={() => this.sortOnChange(true)}
    color={this.state.recentColor}
  >
    Most Relevant
  </Button>
</ButtonGroup>;

【讨论】：