Question

我正在制作Closable TabPanel，当我点击某个标签时，我会切换到该标签的面板。我点击哪个Panel的标签，Panel打开。太棒了。

但现在我希望旁边有一个轮播按钮，列出下一个，下一个，下一个Panel。这意味着我需要知道我现在在哪个面板上（现在哪个面板处于活动状态）？如何判断行中的下一个面板（ setPanel（activeId + 1））？

目前，我正在获取所有现有PANELS的列表，并提取所有ID： [45,46,47,48,49] 。我从DataBase获取它，但我不知道如何获得当前的Active面板以及如何说去下一个！？

有什么想法吗？

Answer 1

使用属性：activeItem = {2}

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

<强> App.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;

<强> ClosableComponent.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;

从extReact sencha组件

1 个答案: