Question

您好，Reactjs / Reactstrap专家-

我是ReactJS和Reactstrap的新手，我找不到一个实时示例演示通过JS进行NavItem切换。

我试图基于按钮的点击，将Reactstrap的Nav和Navlink从一个选项卡切换到另一个选项卡。在下面的代码笔页面中，当在选项卡1上单击“转到选项卡2”时，将显示为空白视图，而在选项卡2中单击“转到选项卡1”按钮时，也会发生同样的情况。我不确定该去哪里。错误的。

这是我的JS代码和一个code pen created based on the below code。

能请你帮忙吗？

const { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText } = Reactstrap;

class App extends React.PureComponent {

  constructor() {    
    super();
    this.state = {
      activeTab: '1'
    };
    this.toggle = this.toggle.bind(this);
    this.switchToTab1 = this.switchToTab1.bind(this);
    this.switchToTab2 = this.switchToTab2.bind(this);
  }

   toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

  switchToTab2() {
    this.toggle(2);
  }

  switchToTab1() {
    this.toggle(1);
  }

  render() {
    return (
      <React.Fragment>
        <Nav tabs className="card-header-tabs">
          <NavItem>
              <NavLink active={this.state.activeTab === '1'} onClick={() => { this.toggle('1'); }}>
                  Tab 1
              </NavLink>
          </NavItem>
          <NavItem>
              <NavLink active={this.state.activeTab === '2'} onClick={() => { this.toggle('2'); }}>
                  Tab 2
              </NavLink>
          </NavItem>
        </Nav>
          <div className="card-body">
            <TabContent activeTab={this.state.activeTab}>
              <TabPane tabId="1">
                <h1>Content from Tab 1</h1>
                <Button color="primary" onClick={this.switchToTab2}>Go to Tab 2</Button>
              </TabPane>
              <TabPane tabId="2">
                <h1>Content from Tab 2</h1>
                <Button color="primary" onClick={this.switchToTab1}>Go to Tab 1</Button>
              </TabPane>
            </TabContent>
         </div>
      </React.Fragment>
    );  
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

Answer 1

您正在将字符串ID与数字ID混合在一起，并在比较时使用===（严格相等性检查）Reference。

问题出在您的toggle方法上，您正在传递数字ID。它应该传递字符串ID，并且应该可以工作。

switchToTab2() {
   this.toggle(2); // It should be this.toggle('2')
}

switchToTab1() {
   this.toggle(1); // It should be this.toggle('1')
}

这是更新的代码笔链接：https://codepen.io/anon/pen/rQEbOJ?editors=0010

以编程方式切换Reactstrap NavItem

1 个答案: