反应标签和selectedIndex

Question

我在受控模式下使用React选项卡（https://github.com/reactjs/react-tabs）。

在父组件中设置tabIndex：

this.setState({
    tabIndex: 1,
});

并在属性中传递tabIndex：

<TabContents tabIndex={this.state.tabIndex} />

将组件置于“受控模式”：

export default class TabContents extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0
        }

    }

    ...

    render() {

        <Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>

    ...

    }
}

这有效，并且选择了第二个标签（tabIndex为1）。

但是，当我单击任何其他选项卡时，什么都没有发生。它停留在tabIndex的1中。在“受控模式”下，如何允许切换标签？

完整的JSX：

<Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
    <TabList>
        <Tab>Accounts <span className="badge badge-pill badge-primary">{this.props.selectedSource ? this.props.sources[sourceIndex].accounts.length : 0}</span></Tab>
        <Tab>Forms</Tab>
    </TabList>

    <TabPanel>
        {this.props.activeDetails ? this.props.activeDetails.make : null }

        {accounts && (
            <ul className="accounts-list list-group">{accounts}</ul>
        )}

        {disabled_accounts && (
            <ul className="accounts-list disabled list-group">{disabled_accounts}</ul>
        )}

    </TabPanel>
    <TabPanel>
        <h2>Forms</h2>
        {this.props.activeDetails ? this.props.activeDetails.make : null }
    </TabPanel>
</Tabs>

Answer 1

 <Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>

根据您的问题，您有多个子组件，但是选择时，您正在更改本地状态onSelect={tabIndex => this.setState({ tabIndex })}

您需要做什么？

1. 您需要在父组件中创建一个方法
2. 将道具传递给子组件
3. 在子级onSelect上调用该父方法

现在，父级将负责活动标签。

这里有example个孩子叫父母。

Answer 2

根据您上面的评论，您需要保存父级和子级组件值。

所以您可以使用状态和构造函数非常有效。

无需将参数发送给parent。您可以从父级访问状态值。