Umschalten des Tastenstatus und Wiederverwendung der Umschaltfunktion für andere Tasten

Question

Ich habe vier Tastenkomponenten, für die ich eine primäre Stützenkomponente umschalten möchte, und die primäre Stütze ist nur ein wahrer/falscher Eingang. Bei "True" ändert sich die Farbe der Schaltfläche in Violett, bei "False" in Grau. Momentan ist der einzige Weg, wie ich das tun könnte, eine neue toggleProfitView-Funktion zu erstellen, die explizit setState({revenueb: !this.state.revenueb}) angibt, und eine andere, die zum Beispiel setState({profitb: !this.state.profitb}) tut, aber ich habe vier verschiedene Schaltflächenzustände und möchte sie einfach wiederverwenden können eine Funktion, die weiß, welcher Knopf umzuschalten ist. Ich versuche mit meinem Code TROCKEN zu sein. In Pseudocode wäre es so etwas wie,

this.button.primary.state = !this.button.primary.state 

Irgendwelche Ideen? Vielen Dank.

toggleProfitView(key, event) { 
    console.log(event) 
    var plot_number = this.state.plot_number 
    this.setState({variant_plot_data: this.props.final_plot[plot_number]},() => { 
     this.updatePlots(key); 
    }); 
    } 

function PlotIfDataExists(props) { 
    const dataExists = props.dataExists; 
    if(dataExists) { 
    return (<div> 
       <ProductGraphData variant_plot_data = {variant_plot_data} /> 
       <Stack spacing="none" distribution="leading"> 
       <Select 
        options={props.variants} 
        placeholder="Select" 
        onChange={props.handleVariantChange} 
       /> 
       <Button onClick={props.toggleVariantPlotData}>Next Plot</Button> 
       <Button primary={props.revenueb} onClick={(event) => props.toggleView('revenue', event)}>Revenue Plot</Button> 
       <Button primary={props.profitb} onClick={(event) => props.toggleView('profit', event)}>Profit Plot</Button> 
       <Button primary={props.profitvb} onClick={(event) => props.toggleView('profit_per_view', event)}>Profit/View Plot</Button> 
       <Button primary={props.revenuevb} onClick={(event) => props.toggleView('rev_per_view', event)}>Rev/View Plot</Button> 
       <Button onClick={props.showAllPlots}>Show All</Button> 
       </Stack> 
       <LastPriceTestContainer analytics_data = {variant_plot_data} /> 
      </div> 
    ); 
    } 
    return null; 
} 

Answer 1

Ich löste dieses Problem mit einem Hash, um die Zustände zu erhalten.