javascript - Change active tab on click react js - Stack Overflow

admin管理员组

文章数量:1023815

I am using React.Bootstrap and I am trying to change the active tab using a inside a tab. For example, I am in tab 1 and I would like to go to tab 2 WITHOUT using the nav links that I have outside my tabs.

Here's the code

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un pte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un pte</a>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

My handleSelect() function looks like this :

const handleSelect = (eventKey) => {
        eventKey = "second"
    }

Thank you for your help.

I am using React.Bootstrap and I am trying to change the active tab using a inside a tab. For example, I am in tab 1 and I would like to go to tab 2 WITHOUT using the nav links that I have outside my tabs.

Here's the code

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un pte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un pte</a>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

My handleSelect() function looks like this :

const handleSelect = (eventKey) => {
        eventKey = "second"
    }

Thank you for your help.

• javascript
• reactjs
• react-bootstrap

Share Improve this question Follow asked Nov 20, 2021 at 4:29 Silent observerSilent observer 7911 gold badge33 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to use some state to represent the currently selected tab. Then you can set this state from either navs or your external ponent.

Add this inside your ponent function:

  const [currentTab, setCurrentTab] = useState("first");

  const handleSelect = (eventKey) => {
    setCurrentTab("second");
  };

Obviously this will only select the second tab, but that seems to be what you wanted in your example.

Then change your Tab.Container to:

    <Tab.Container
      defaultActiveKey="first"
      activeKey={currentTab}
      onSelect={(key) => setCurrentTab(key)}
    >

So this will allow to also change the selection from Navs themeselves.

Here's a sandbox link with a working example.

I am using React.Bootstrap and I am trying to change the active tab using a inside a tab. For example, I am in tab 1 and I would like to go to tab 2 WITHOUT using the nav links that I have outside my tabs.

Here's the code

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un pte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un pte</a>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

My handleSelect() function looks like this :

const handleSelect = (eventKey) => {
        eventKey = "second"
    }

Thank you for your help.

I am using React.Bootstrap and I am trying to change the active tab using a inside a tab. For example, I am in tab 1 and I would like to go to tab 2 WITHOUT using the nav links that I have outside my tabs.

Here's the code

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un pte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un pte</a>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

My handleSelect() function looks like this :

const handleSelect = (eventKey) => {
        eventKey = "second"
    }

Thank you for your help.

• javascript
• reactjs
• react-bootstrap

Share Improve this question Follow asked Nov 20, 2021 at 4:29 Silent observerSilent observer 7911 gold badge33 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to use some state to represent the currently selected tab. Then you can set this state from either navs or your external ponent.

Add this inside your ponent function:

  const [currentTab, setCurrentTab] = useState("first");

  const handleSelect = (eventKey) => {
    setCurrentTab("second");
  };

Obviously this will only select the second tab, but that seems to be what you wanted in your example.

Then change your Tab.Container to:

    <Tab.Container
      defaultActiveKey="first"
      activeKey={currentTab}
      onSelect={(key) => setCurrentTab(key)}
    >

So this will allow to also change the selection from Navs themeselves.

Here's a sandbox link with a working example.

本文标签： javascriptChange active tab on click react jsStack Overflow