reactjs - 如何以编程方式从 Material UI 的选项卡中设置事件选项卡

Question

我正在使用 Material UI 和 React，我正在以编程方式创建多个选项卡，如下所示:

return (
    <div>
        <Tabs>
            {this.state.elements.map(elem => {
                return (
                    <Tab key={elem.elemID} label={elem.name} >
                        <div>
                           // rest removed for brevity
                        </div>
                    </Tab>
                )
            })}
        </Tabs>
    </div>
);

这可以工作，并且会显示选项卡，但问题是默认情况下，当组件呈现时，第一个选项卡是事件选项卡。然而，我想根据从 props 获得的 id 值以编程方式设置事件选项卡。所以基本上，如果 this.props.selectedID === elem.elemID 那么我希望该选项卡在组件渲染时成为事件选项卡。当然，一旦渲染了组件，用户就应该可以自由地单击选项卡并在选项卡之间切换。知道如何实现它吗？

Answer 1

使用 Tabs 和 Tab 上的 value 属性使其成为受控组件:

<Tabs value={this.props.selectedID}>
    {this.state.elements.map(elem => {
            return (
                <Tab key={elem.elemID} label={elem.name} value={elem.elemID}>
                    <div>
                       // rest removed for brevity
                    </div>
                </Tab>
            )
        })}
</Tabs>