代码之家  ›  专栏  ›  技术社区  ›  beingalex

React选项卡和selectedIndex

  •  1
  • beingalex  · 技术社区  · 6 年前

    https://github.com/reactjs/react-tabs )处于受控模式。

    设置 tabIndex 在父组件中:

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

    并通过 通过属性:

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

    这可以工作,第二个选项卡(带有 标签索引

    但是,当我点击任何其他选项卡时,什么都没有发生。它卡在地板上了 标签索引 第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>
    
    2 回复  |  直到 5 年前
        1
  •  1
  •   Just code    6 年前
     <Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
    

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

    你需要做什么?

    1. 您需要在父组件中创建一个方法
    2. 关于儿童 onSelect

    现在,父级将负责活动选项卡。

    这是一个 example 从孩子打电话给父母。

        2
  •  0
  •   Karthik    6 年前

    根据上述注释,您需要使用父组件和子组件值进行保存。。

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