React-fullscreen не работает: метод goFull не запускается

Question

У меня есть AdminNavbar Component, который содержит все, что нужно для верхней горизонтальной панели навигации. Этот AdminNavbar Component затем импортируется в Admin Layout. Я использую эту библиотеку реагирования для достижения on click full-screen functionality.

AdminNavbar Component имеет кнопку, onClick из которой запускает метод goFull(), а в Admin Layout, Я завернул весь JSX внутрь <FullScreen></FullScreen>

Проблема в том, что goFull() не срабатывает, и я не уверен, как его повесить.

Код для Компонент AdminNavbar

import React from "react";
//  reactstrap components
import { Navbar, NavbarBrand, Container } from "reactstrap";

class AdminNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFfull: false,
    };
  }

  render() {
    return (
      <Navbar className="navbar" expand="lg">
        <Container fluid>
          <div className="navbar-wrapper">
            <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

            <button className="btn-fullscreen" onClick={this.goFull}>
              <i className="fa fa-expand-arrows-alt"></i>
            </button>
          </div>
        </Container>
      </Navbar>
    );
  }
}

экспорт AdminNavbar по умолчанию;

Код для макета администратора

import React from "react";
// core components
import AdminNavbar from "components/Menu/AdminNavbar.js";

import routes from "routes/routes.js";

import Fullscreen from "react-full-screen";

var ps;

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeColor: "primary",
      sidebarMini: true,
      opacity: 0,
      sidebarOpened: false,
      isFfull: false,
    };
  }

  goFull = () => {
    this.setState({ isFull: true });
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel" ref="mainPanel">
            <AdminNavbar
              {...this.props}
              brandText={this.getActiveRoute(routes)}
            />
          </div>
        </div>
      </Fullscreen>
    );
  }
}

export default Admin;

Answer 1

Ну ...

проблема заключается в передаче реквизита из компонента Admin в компонент AdminNavbar .

Прямо сейчас согласно моему понимание заключается в том, что ваша кнопка в AdminNavBar не может распознать метод goFull () .

А также есть опечатка в состоянии isFfull должно быть isFull

Пожалуйста, внесите следующие изменения, и он будет работать.

In Admin

    import React from "react";
    // core components
    import AdminNavbar from "components/Menu/AdminNavbar.js";

    import routes from "routes/routes.js";

    import Fullscreen from "react-full-screen";

    var ps;

    class Admin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          activeColor: "primary",
          sidebarMini: true,
          opacity: 0,
          sidebarOpened: false,
          isFull: false,
        };
      }

      goFull = () => {
        this.setState({ isFull: true });
      };
      render() {
        return (
          <Fullscreen
            enabled={this.state.isFull}
            onChange={(isFull) => this.setState({ isFull })}
          >
            <div className="wrapper">
              <div className="main-panel" ref="mainPanel">
                <AdminNavbar
                  {...this.props}
                  goFull={this.goFull}
                  brandText={this.getActiveRoute(routes)}
                />
              </div>
            </div>
          </Fullscreen>
        );
      }
    }

    export default Admin;

В AdminNavbar

import React from "react";
 //  reactstrap components
import { Navbar, NavbarBrand, Container } from "reactstrap";

 class AdminNavbar extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  isFull: false,
  };
 }

  render() {
    return (
    <Navbar className="navbar" expand="lg">
    <Container fluid>
      <div className="navbar-wrapper">
        <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

        <button className="btn-fullscreen" onClick={this.props.goFull}>
          <i className="fa fa-expand-arrows-alt"></i>
        </button>
      </div>
    </Container>
  </Navbar>
 );
 }
}
export default AdminNavbar;