ボタンの状態をトグルして他のボタンのトグル機能を再利用する

Question

私は、主要なプロップコンポーネントを切り替える4つのボタンコンポーネントを用意しています。 trueの場合はボタンの色が紫色に変わり、falseの場合は灰色に変わります。現在、これを行う方法を知っている唯一の方法は、setState({revenueb: !this.state.revenueb})と明示的に新しいtoggleProfitView関数を作成することです。もう1つはsetState({profitb: !this.state.profitb})ですが、4つの異なるボタン状態があり、再利用できるようにしたいと思いますトグルするボタンを知っている関数。私は自分のコードで乾いているようにしようとしています。疑似コードでは、

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

どのようなアイデアですか？ありがとう。

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

この問題は、状態を維持するためにハッシュを使用して解決しました。

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