如何在react-bootstrap中更改选项卡上调用事件

Question

我已经使用 React-Bootstrap 在我的 React 应用程序中实现了导航选项卡。

像这样：

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

现在在更改选项卡时我想调用以下函数：

changeTab(login) {
  if (login)
    this.setState({ heading: "Log in" })
  else
    this.setState({ heading: "Sign up" })
}

其中

login

是一个布尔值，当选择

true

选项卡时将为

Log in

，当选择

false

选项卡时为

Sign up

。

我怎样才能做到这一点？

编辑：

我发现你可以在单击选项卡时调用一个函数，如下所示：

<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>

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

Answer 1

您需要在

onSelect

组件中使用

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

功能：

handleSelect(key) {
  if (key === 1)
    this.setState({ heading: "Log in" })
  else
    this.setState({ heading: "Sign up" })
}

对于多个处理程序，您可以执行以下操作：

handleSelect(key) {
  {
    1: this.setState({ heading: "Log in" }),
    2: this.setState({ heading: "Sign up" }),
    3: this.setState({ heading: "Something Else" }),
  }[key]
}

Answer 2

<Tab.Container id="" defaultActiveKey={key} onSelect={this.handleSelect}>
   <Nav variant="tabs">
        <Nav.Item>
        <Nav.Link eventKey={'1'}>Staking</Nav.Link>
        </Nav.Item>

        <Nav.Item>
        <Nav.Link eventKey={'2'}>Providers</Nav.Link>
        </Nav.Item>

        <Nav.Item>
        <Nav.Link eventKey={'3'}>Overview</Nav.Link>
        </Nav.Item>
    </Nav>
    <Tab.Content>
        <Tab.Pane eventKey={'1'}>
         <Row>
             <Col>
              1111
             </Col>
         </Row>
        </Tab.Pane>
    </Tab.Content>
    <Tab.Content>
        <Tab.Pane eventKey={'2'}>
        <div>22222</div>
        </Tab.Pane>
    </Tab.Content>
    <Tab.Content>
        <Tab.Pane eventKey={'3'}>
        <div>333</div>
        </Tab.Pane>
    </Tab.Content>
 </Tab.Container>

现在在您所在的州添加初始值为“1”的“key”字段

  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)
      }
  }

最初，当页面加载时，不会调用该函数，因此您可以在第一个选项卡、componentDidMount 或任何其他函数中进行 API 调用或您想要执行的任何操作，并将其放置在第一个选项卡中，即我写下 1111 的位置，此后，当您单击另一个选项卡时，将调用 handleSelect 函数，并根据键值并使用 if..else 语句来执行特定选项卡的特定任务。

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

Answer 3

这里，你可以像

Barry Michael Doyle

所说的那样使用onSelect。让我给你发一个示例代码，让你更清楚。

function Example() {

    return (
        <Tabs defaultActiveKey="home" id="uncontrolled-tab-example"
        className="mb-3" onSelect={(e) => handleClick(e)}>
        
            <Tab eventKey="homeTab" title="Home">
            </Tab>
            <Tab eventKey="profileTab" title="Profile">
            </Tab>
            <Tab eventKey="contactTab" title="Contact">
            </Tab>
            
        </Tabs>
    );

    function handleClick(e) {
        console.count(e);
        
        //result will be the eventKey of the tab you clicked on.
        
        // `homeTab` (when clicked on home tab)
        // `profileTab` (when clicked on profile tab)
        // `constactTab` (when clicked on Contact tab)
    }

}

Answer 4

             <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Row>
                            {
                                projects.map( (project, index) => {
                                    return{
                                       <p>{project.title}</p>
                                
                                    }
                                })
                            }
                        </Row>
                    </Tab.Pane>
                </Tab.Content>