在 ReactJS + Flux 中与许多选项卡共享一个保存按钮

Question

我在 ReactComponent 中有一个结构，例如

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

每个tab都可以在后台创建一个独立的entity，每个tab组件在FLUX中都有自己的Store和Action相关。

我的问题是是否可以使保存按钮与上下文相关？所以如果你按下那个按钮，它可以在函数中处理 "handleButton" Action 和 Store 是相关的。

最简单的替代方法是在每个选项卡中嵌入保存按钮，但由于图形设计限制，这是不可能的。

Answer 1

您可以在 MyComponent 的状态下跟踪活动选项卡。然后，您可以将回调传递给每个 Tab 以更改状态以反映哪个选项卡处于活动状态。这样，您的 handleButton 函数只需要访问 this.state.activeTab 来处理上下文中的保存操作。

在 ReactJS + Flux 中与许多选项卡共享一个保存按钮

In ReactJS + Flux share a save button with many tabs

reactjs

reactjs-flux