切换按钮状态并重新使用其他按钮的切换功能

Question

I have four button components that I would like to toggle a primary prop component for, and the primary prop is just a true/false input. When true it changes the button color to purple, when false it is grey. Currently, the only way I would know how to do this is to create a new toggleProfitView function that explicitly states setState({revenueb: !this.state.revenueb}) , and another that does setState({profitb: !this.state.profitb}) for example, but I have four different button states and I'd like to be able to just reuse a function that knows which button to toggle. I'm trying to be DRY with my code. In pseudocode it would be something like,

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

Any ideas? Thanks.

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

I solved this problem using a hash to maintain the states.

 toggleView(key, event) {
    const button_states_hash = Object.assign({}, this.state.button_states);
    button_states_hash[key] = !button_states_hash[key]
    var plot_number = this.state.plot_number
     this.setState({
       variant_plot_data: this.props.final_plot[plot_number],
       button_states: button_states_hash
     }, () => {
      this.updatePlots(key);
    });
  }