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

Question

<Tabs>不会随着 State 更改而更改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>


);
}

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

Answer 1

看来你的问题来自

• 错误的 props ❌ defaultactivekey传递给 Tabs 组件
  --> 应该是 camelCase: ✅default A ctive Key
• 您的 function 语法取决于基于 class 的组件。 如果是这种情况，我认为您想要执行以下操作

class NAMEOFYOURCOMPONENT extends React.Component {
 /* - This syntax ensures `this` is bound within functionToChangeDefaultTab.
    - Warning: this is *experimental* syntax.
     ( from react's doc see: https://reactjs.org/docs/handling-events.html)
    - you wrote: ❌ functionToChangeDefaultTab()=>{ ... } */

     // ✅ should be
     functionToChangeDefaultTab = () => {
       // ... code ...
     }


     render() {
       return (
        {/* ... code ... */}
       );
     }
}

然后它应该工作。

Answer 2

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

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