切換按鈕狀態並重用其他按鈕的切換功能

我有四個按鈕組件，我想切換主要的prop組件，主要的prop只是一個真/假輸入。如果爲true，則將按鈕顏色更改爲紫色，如果爲false，則爲灰色。目前，我知道如何做到這一點的唯一方法是創建一個新的toggleProfitView函數，明確聲明setState({revenueb: !this.state.revenueb})，另一個例如setState({profitb: !this.state.profitb})，但我有四種不同的按鈕狀態，我希望能夠重用知道哪個按鈕切換的功能。我試圖用我的代碼幹。在僞代碼它會是這樣的，切換按鈕狀態並重用其他按鈕的切換功能

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

來源

2017-11-04 ByteMe

如果我理解正確，那麼管理它自己的顏色狀態onClick的自定義Button組件如何。如果父母需要知道任何東西，您仍然可以調用由父母傳入的onClick。 –

我解決了這個問題，使用散列來維護狀態。

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

來源

2017-11-04 23:40:35 ByteMe

切換按鈕狀態並重用其他按鈕的切換功能

回答

相關問題