Question

我有四个按钮组件，我想切换主要道具组件，主要道具只是一个真/假输入。如果为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;
}

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

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

1 个答案: