Javascript 使用onClick ReactJS更改2个按钮的颜色

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

   <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>

updateResults函数目前不执行任何操作

国家是：

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

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

我如何使它在您单击一个选项时，它们都会改变颜色，以便单击的按钮获得“主”颜色，“未单击”按钮获得“次”颜色

this.sortOnChange（false）}
颜色={this.state.relevanceColor}
>
最近的
this.sortOnChange（true）}
color={this.state.recentColor}
>
最相关
;

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

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