Как настроить элемент ProgressBar, чтобы он отображался при нажатии на элемент навигации?

Question

У меня есть компонент nav моего сайта ниже:

import React, { Component } from "react";
import { ProgressBar } from "react-bootstrap";

class Nav extends Component {
  constructor() {
    super();
    this.state = {
      percentage: 0
    };
  }

  render() {
    return (
      <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">
            Navbar
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">
                  Home <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  href="#"
                  onClick={() =>
                    this.setState({ percentage: this.state.percentage + 100 })
                  }
                >
                  SCIQ
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  PIQ
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <div>
          <ProgressBar
            hidden
            striped
            variant="success"
            now={this.state.percentage}
          />
        </div>
      </div>
    );
  }
}

export default Nav;

ProgressBar в настоящее время установлен как «скрытый». После нажатия на один из элементов навигации мне бы хотелось, чтобы элемент ProgressBar был установлен в видимый.

В элементе навигации SCIQ уже есть событие щелчка, которое обновляет свойство now ProgressBar элемент. Итак, я достиг 50% того, что хочу в событии клика. Мне просто нужно выяснить, как использовать метод setState, чтобы позволить мне как-то обновить свойства указанного элемента c.

Answer 1

На основе классов (без хуков)

Вот пример, который более точно отражает вашу текущую структуру. Логика c такая же, как в первом примере. Я устанавливаю переменную состояния на false и условно отображаю демо <ProgressBar />.

import React from "react";

class Nav extends React.Component {
  constructor() {
    super();
    this.state = {
      percentage: 0,
      navClicked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      percentage: this.state.percentage + 100,
      navClicked: true
    });
  }

  render() {
    const ProgressBar = props => {
      const { percentage } = this.state;
      return <progress max="100" value={percentage} {...props} />;
    };

    const { navClicked } = this.state;

    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <a className="nav-link" href="#" onClick={this.handleClick}>
                  SCIQ
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <div>
          {navClicked && (
            <ProgressBar
              striped
              variant="success"
              now={this.state.percentage}
            />
          )}
        </div>
      </div>
    );
  }
}

export default Nav;

на CodeSandbox

---

с крючками

Вот краткое демо , которое демонстрирует сценарий скрытия / показа индикатора выполнения. Обратите внимание, что я использую Hooks в своем демо вместо состояния на основе классов.

1. Сначала я импортирую useState из React.
2. Далее я отслеживаю, был ли нажат элемент навигации, инициализируя это состояние как false.
3. После нажатия на элемент Show progress я вызываю setNavClicked и передаю его false.
4. На этапе рендеринга я использую технику условного рендеринга, чтобы показывать <ProgressBar /> только тогда, когда navClicked равен true.

import React, { useState } from "react";

export default function App() {
  const [percentage, setPercentage] = useState(0);
  const [navClicked, setNavClicked] = useState(false);

  function ProgressBar(props) {
    return <progress max="100" value={percentage} {...props} />;
  }

  function showProgress() {
    setNavClicked(true);
    setPercentage(80);
  }

  function hideProgress() {
    setNavClicked(false);
    setPercentage(0);
  }

  function NavBar() {
    return (
      <ul class="navbar-nav">
        <li>
          <a onClick={showProgress} href="#">
            Show progress
          </a>
        </li>
        <li>
          <a onClick={hideProgress} href="#">
            Hide progress
          </a>
        </li>
      </ul>
    );
  }

  return (
    <main className="App">
      <h1>Progress Bar Demo</h1>
      <NavBar />
      {navClicked && <ProgressBar />}
    </main>
  );
}

Демонстрация на CodeSandbox