切换按钮上的图标单击反应

Question

我正在使用react-full-screen库。

Link to code sandbox

我有一个导航栏，在其中装有带有图标的按钮的JSX。

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">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                <i className="fa fa-expand-arrows-alt"></i>
                <i className="fa compress-arrows-alt"></i>
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}

然后在另一个Admin Component中，我将其用作道具并执行onClick()

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

  goFull = () => {
    if (document.body.classList.contains("btn-fullscreen")) {
      this.setState({ isFull: true });
    } else {
      this.setState({ isFull: false });
    }
    document.body.classList.toggle("btn-fullscreen");
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel">
            <AdminNavbar {...this.props} goFull={this.goFull} />
          </div>
        </div>
      </Fullscreen>
    );
  }
} 

问题：单击按钮后图标未更改。我也尝试使用active类。但没有运气。

Answer 1

您不必检查正文中的classList。可以通过状态更改来实现图标切换。请查看代码。

import React from "react";

import AdminNavbar from "./AdminNavbar";

import Fullscreen from "react-full-screen";

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

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

export default Admin;

管理员导航栏代码

import React from "react";

//  reactstrap components
import { Navbar, 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">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                {!this.props.isFull ? (
                  <i className="fa fa-expand-arrows-alt"></i>
                ) : (
                  <i className="fa compress-arrows-alt"></i>
                )}
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}

export default AdminNavbar;