Как переключить класс css на активную вкладку реаги- bootstrap? - PullRequest
Новая
       8

Как переключить класс css на активную вкладку реаги- bootstrap?

3 голосов
/ 28 января 2020

Я пытаюсь добавить собственный стиль к активной вкладке, но не знаю, как переключить класс стилей для активной вкладки.

Ниже приведен мой код:

https://codesandbox.io/s/stupefied-galois-f46s3

Спасибо

1 Ответ

7 голосов
/ 30 января 2020

вы можете использовать состояние для идентификации активной вкладки, как это (вы можете реорганизовать ее в соответствии с вашими потребностями)

рекомендуемый материал для чтения - это контролируемый / неконтролируемый компонент https://reactjs.org/docs/forms.html#controlled -компоненты 

import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
export default function App() {
  const [key, setKey] = useState('first');
  const ActiveStyle = {
    textAlign: "center",
    background: "white",
    borderRadius: "2em",
    padding: " 0.3em 1.5em",
    letterSpacing: "0.2em"
  };
  const inActiveStyle = {
    ...ActiveStyle,
    background: 'transparent',
    'border-color': 'transparent',
    'color': 'inherit'
  };
  return (
    <div className="App">
      <Container style={{ width: "auto" }}>
        <Tab.Container activeKey={key} onSelect={key => setKey(key)}>
          <Row style={{ padding: "1em 1em", background: "#EEEEEE" }}>
            <Col>
              <Nav.Link
                eventKey="first"
                style={ key === 'first' ? ActiveStyle : inActiveStyle}
              >
                <span style={{ fontSize: "larger" }}>Q&A </span>
              </Nav.Link>
            </Col>
            <Col>
              <Nav.Link eventKey="second" style={ key === 'second' ? ActiveStyle : inActiveStyle}>
                <span>
                  Exams
                </span>
              </Nav.Link>
            </Col>
          </Row>

          <Tab.Content>
            <Tab.Pane eventKey="first">
              <Row style={{ height: "90vh" }}>
                <p>TAB 1</p>
              </Row>
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <Row style={{ height: "90vh" }}>
                <p>TAB 2</p>
              </Row>
            </Tab.Pane>
          </Tab.Content>
        </Tab.Container>
      </Container>
    </div>
  );
}
...