Reactjs 如何在react引导中更改的选项卡上调用事件

我已经使用React引导在React应用程序中实现了导航选项卡

像这样：

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

其中，

login

是一个布尔值，当选择

登录

选项卡时，

true

，当选择

注册

选项卡时，

false

我该怎么做

编辑：

我发现，当单击选项卡时，您可以调用上的函数，如下所示：

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={1} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

this.changeTab（）}>
{/*无关代码*/}
{/*无关代码*/}

---

但是我怎么知道哪个标签被点击了呢？我需要它来根据单击的选项卡更改状态。

您需要在

选项卡

组件中使用

onSelect

像这样：

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}>
    <Tab eventKey={1} title="Log in">
        {/* Irrelevant code */}
    </Tab>
    <Tab eventKey={2} title="Sign up">
        {/* Irrelevant code */}
    </Tab>
</Tabs>

然后编写一个函数

  handleSelect = (key) => {
      console.log(key,';;',typeof key)
      if(key === '1') {
          console.log('ll', key)
      } else if(key === '2') {
        console.log('ll', key)
      } else if(key === '3') {
        console.log('ll', key)
      }
  }

最初加载页面时，不调用函数，因此您可以在第一个选项卡、componentDidMount或任何其他函数中进行API调用或任何您想做的事情，并将其放置在第一个选项卡中，即我写的1111处，然后单击另一个选项卡，调用handleSelect函数并基于键值，使用if..else语句为特定选项卡执行特定任务

---

希望这有帮助。如果有任何问题，请在评论部分告诉我们。

您是否尝试在选项卡上定义

onClick

事件，如：

this.changeTab（）}>

是的，但它不起作用，所以我现在在这里询问。哦，它确实起作用，必须进行一些修补，但效果不错。谢谢。不用担心，当你把它放在

选项卡上时，它就可以工作了。但是，我怎么知道选择了哪个选项卡呢？如果我们需要为每个选项卡添加不同的事件处理程序呢？似乎是个问题。处理程序中的更多if语句应该可以解决这个问题。
  constructor(props) {
    super(props);
    this.state = {
     key: '1'
    };
  }

  handleSelect = (key) => {
      console.log(key,';;',typeof key)
      if(key === '1') {
          console.log('ll', key)
      } else if(key === '2') {
        console.log('ll', key)
      } else if(key === '3') {
        console.log('ll', key)
      }
  }