React-fullscreen 不工作：goFull 方法没有被触发

Question

我有一个 AdminNavbar Component，其中包含顶部水平导航栏的所有内容。这个 AdminNavbar Component 然后被导入 Admin Layout。我正在使用 this react library 来实现 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().

还有 state 中的错字 isFfull 应该是 isFull

请进行以下更改，它将起作用。

在管理员


    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;

React-fullscreen 不工作：goFull 方法没有被触发

React-fullscreen not working: goFull method is not getting triggered

fullscreen

reactjs