0

我正在制作Closable TabPanel，当我单击某个选项卡时，我将切换到该选项卡的面板。我单击哪个面板的选项卡，该面板将打开。那太棒了。

但现在我想在侧面有一个轮播按钮，列出下一个、下一个、下一个面板。这意味着我需要知道我目前在哪个面板上（现在哪个面板处于活动状态）？以及如何判断在行中取下一个面板（setPanel(activeId+1)）？

现在，我正在获取所有现有面板的列表，并提取它们的所有 ID：[45,46,47,48,49]。我从数据库中获取它，但我不知道如何获取当前活动面板以及如何说去下一个！？

有任何想法吗？

在此处输入图像描述

4

1 回答 1

0

使用属性：activeItem={2}

例如：<TabPanel activeItem={this.state.componentNumber} border={false} ...> </TabPanel>

应用程序.js

import React, { Component } from 'react';
import { Button } from '@extjs/ext-react';
import ClosableComponent from './ClosableComponent';

class App extends Component {

  constructor() {
    super();
    this.state = {
      componentNumber: 2,
    };
  }

  switchFunctionLeft = () => {
    if(this.state.componentNumber === 0){
      this.setState({ componentNumber: 2 })
    }else{ 
      this.setState({ componentNumber: this.state.componentNumber - 1 })
    }
  }

  switchFunctionRight = () => {
    if(this.state.componentNumber === 2){
      this.setState({ componentNumber: 0 })
    }else{ 
      this.setState({ componentNumber: this.state.componentNumber + 1 })
    }
  }

  render() {
    return (
      <div className="App">

        <div >
            <ClosableComponent componentNumber={this.state.componentNumber} />
            <Button text="switch to left" handler={this.switchFunctionLeft} />
            <Button text="switch to right" handler={this.switchFunctionRight}/>
        </div>
      </div>
    );
  }
}

export default App;

可关闭组件.js

import React, {
    Component
} from 'react';

import {
    TabPanel,
    Container,
    Toolbar,
    Button
} from '@extjs/ext-react';

class ClosableComponent extends Component {


    nextKey = 0;

    constructor() {
      super();
      this.state = {
        type: "No",
        switch: "",
        tabs: [
          this.nextKey++, 
          this.nextKey++, 
          this.nextKey++
        ]
      };
    }

    onCloseTab = tab => {
        const tabs = this.state.tabs.filter(t => t !== tab);
        this.setState({
            tabs
        })
    }

    addTab = () => {
        const key = this.nextKey++;
        const tabs = [...this.state.tabs, key];
        this.setState({tabs}) 
        this.tabPanel.setActiveItem(tabs.indexOf(2)) 
        return false;
    }


    render() {
        const { tabs } = this.state;

        return (
          <div>

            <Container layout="fit" padding = {10}>
              <TabPanel 
                  ref = {tp => this.tabPanel = tp} 
                  _reactorIgnoreOrder 
                  shadow
                  style={{ backgroundColor: 'white', "height": "200px"}}
                  activeItem={this.props.componentNumber}
                  tabBar={{
                      height: 48,
                      layout: {
                          pack: 'left'
                      },
                      style: {
                          paddingRight: '52px'
                      }
                  }}
              >
                  { tabs.map(key => (
                      <Container
                          title = {`Tab ${key}`}
                          tab = {{ flex: 1, maxWidth: 150 }}
                          key = {key}
                          layout = "center"
                          closable
                          onDestroy = {this.onCloseTab.bind(this, key)}
                      >
                          <div style = {{ whiteSpace: 'nowrap' }}>Tab {key} Content</div>
                      </Container>
                  ))}
              </TabPanel>
              <Button 
                  top={18} 
                  right={20} 
                  iconCls="x-fa fa-plus" 
                  handler={this.addTab}
                  ui="alt round"
                  tooltip="New Tab"
              />
            </Container>          

        </div>



        );
    }
}

export default ClosableComponent;
于 2018-06-15T09:56:20.310 回答