Как сделать иконку выделенной на выбранном - PullRequest
Новая
       60

Как сделать иконку выделенной на выбранном

0 голосов
/ 10 июля 2020

У меня есть три значка, представляющие графики:

1. 

 <div className="float-right" style={{ marginRight: "5%" }}> 
       <Tooltip disableFocusListener title="BarChart" placement="top"> 
       <BarChartIcon style={{ marginRight: "10px", border: "0.5px solid blue", }} onClick={() => 
       this.renderBarGraph('verticalBarchart')} color="primary" /> 
       </Tooltip> 
       <Tooltip disableFocusListener title="HorizantalBarChart" placement="top"> 
       <BarChartIcon style={{ marginRight: "10px", transform: "rotate(90deg)", 
         border: "0.5px solid blue", marginleft: "8%", }} 
         onClick={() => this.renderBarGraph('horizontalBarchart')} color="primary" /> 
       </Tooltip>
       <Tooltip disableFocusListener title="PieChart" placement="top">   
       <PieChartIcon style={{ marginRight: "10px", border: "0.5px solid blue", }} 
       onClick={() => this.renderBarGraph('pieChart')} color="primary" /> 
       </Tooltip>
       </div>

При щелчке по значку состояние изменяется и отображается график. 

<div className="col-md-9" style={{ marginLeft: "5%" }}>
   {this.state.graph == 'verticalBarchart' ? <SameDataComposedChart /> : ""}
   {this.state.graph == 'horizontalBarchart' ? <VerticalComposedChart /> : ""}
   {this.state.graph == 'pieChart' ? <PieChartWithCustomizedLabel /> : ""}
</div>

Как выделить конкретный значок при выборе.

1 Ответ

0 голосов
/ 14 июля 2020 
    <Tooltip disableFocusListener title="BarChart" placement="top">
    <BarChartIcon style={this.state.graph=='verticalBarchart'?
    styles.activeChart:styles.inactiveChart} onClick={() =>
    this.renderBarGraph('verticalBarchart')} color="primary" />
    </Tooltip> 
   <Tooltip disableFocusListener title="HorizantalBarChart"
    placement="top"> <BarChartIcon
    style={this.state.graph=='horizontalBarchart'?
    styles.activeChartV:styles.inactiveChartV} onClick={() =>
    this.renderBarGraph('horizontalBarchart')} color="primary" />
    </Tooltip> 
    <Tooltip disableFocusListener title="PieChart"
    placement="top"> <PieChartIcon style={this.state.graph=='pieChart'?
    styles.activeChart:styles.inactiveChart} onClick={() =>
    this.renderBarGraph('pieChart')} color="primary" /> 
   </Tooltip>



------------------------------------------------------------------------
...