In ReactJS + Flux share a save button with many tabs

Question

I have an strucure in a ReactComponent like

class MyComponent extends React.Component {
    render() { 
        return (
            <div class="row">
                <MyMenuComponentTab></MyMenuComponentTab>
                <Tab1></Tab1>
                <Tab2></Tab2>
                <Tab3></Tab3>
            </div>
            <div class="row">
                <button onClick={this.handleButton}>SAVE</button>
            </div>
        )
    }
}

In every tab you can create an independent entity in the backend, and every tab component is related with his own Store and Action in FLUX.

My question is if it's possible to makes the save button contextual? So if you press that button, it can handle in the function "handleButton" Action and Store is related.

The simplest alternative is to have embebed the save button in every tab, but isn't possible because of graphical design restrictions.

Answer 1

You could keep track of the active tab in the state of your MyComponent. Then, you could pass a callback to each Tab that changes the state to reflect which tab is active. That way, your handleButton function would only need to access this.state.activeTab to handle the save action in context.