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

我有四个按钮组件，我想切换主要的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

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

回答

相关问题