javascript - 按钮上的开关图标点击反应
问题描述
我正在使用react-full-screen库。
我有一个导航栏,我在其中放置了带有图标的按钮的 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
类。但没有运气。
解决方案
您不必检查 body 上的 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;
推荐阅读
- node.js - Google Cloud Function - 读取使用 NodeJS 创建的存储桶的新文件的内容
- azure-data-explorer - 无法使用 ADX 外部表“虚拟列”访问 ADLS Gen 2 中的文件
- python - 有没有办法使用 python 发送和接收调制信号的信号?
- powershell - 带有私钥的 Azure Key Vault 下载证书
- rpm - 使用脚本构建 rpm,spec %prep 错误,构建失败
- html - 为什么我不能在 td 或 tr 标签内定位一个元素而在 html 中没有 table 标签?
- highcharts - HighStock 图表 - 将默认开盘价更改为收盘价
- python - 为什么这个 python 网页应用程序页面不能正确重定向我?
- firebase - 从嵌套列表创建子集合
- python - 基于 CutoFF 的 Pandas 列的最大子集