javascript - React-Bootstrap 选项卡 defaultActiveKey 不随 stateChange 改变

Question

<Tabs>不会随着状态的改变而改变defaultActiveKey。

1. 对于一种情况，我必须默认打开“写入”选项卡
2. 然后默认情况下打开“读取”选项卡以查看另一种情况

我的代码是这样的

this.state = {
 defaultTab: "write"
}

functionToChangeDefaultTab()=>{
 this.setState({defaultTab: "read"})
}

render(){
 return(
   <Tabs defaultactivekey={this.state.defaultTab} transition={false} onSelect={this.onTabSelected}>
    <Tab eventKey="read" title="read"></Tab>
    <Tab eventKey="write" title="write"></Tab>
    .
    .
   </Tabs>


);
}

即使在运行函数将 setState defaultTab 设置为“读取”值后，“写入”选项卡也会打开。我不知道，如何动态放置 defaultActiveTab。

标签： javascriptreactjsbootstrap-4tabsreact-bootstrap

Answer 1

为什么你不使用 activeKey 道具并传递你的状态

          <Tabs
          activeKey={activeTab}
          id="uncontrolled-tab-example"
          onSelect={(k) => {
            setactiveTab(k || '');
            nevagitation({
              search: `?tab=${k}`,
            });
          }}
          className="bluebordertabs"
        >
     //other code
        </Tabs>