我有一个样式为 Font Awesome 的按钮。 <button onClick={this.changeLockButtonStyle} id="LockButton" > <FaLockOpen /> </button>我正在尝试找到一种方法将样式更改为<FaLockClosed />从在线阅读中我看到的唯一示例是关于 JQuery 和 class=”fas fa-lockclosed” 切换类。但我使用的是按钮，而不是普通图标。我已经尝试过document.getElementById('LockButton').innerHTML= '<FaLockClosed />'但没有用。如果可能，我想避免使用 JQuery。
3 回答
PIPIONE
TA贡献1829条经验 获得超9个赞
干得好：
const [isLocked, setIsLocked] = useState(false);
return (
<button
type="button"
onClick={() => { setIsLocked(true); }}
>
{isLocked ? <FaLockClose /> : <FaLockOpen />}
</button>
);
更新：这就是你在类组件中的做法。
constructor(props) {
super(props);
this.state = {
isLocked: false
};
this.lockIcon = this.lockIcon.bind(this);
}
lockIcon() {
this.setState({ isLocked: true });
}
render() {
const { isLocked } = this.state;
return (
<button
type="button"
onClick={this.lockIcon}
>
{isLocked ? <FaLockClose /> : <FaLockOpen />}
</button>
);
}
达令说
TA贡献1821条经验 获得超6个赞
如果您使用反应或角度，我只会根据按下按钮期间设置的变量切换组件。
有关如何在 React 中进行切换的参考 https://stackoverflow.com/a/46425155/14167216
这是一个 jQuery 示例。您可以在按钮上设置类，然后检查按钮是否有类。如果它有锁定类，则更改为解锁类，反之亦然。检查下面的示例代码。
function changeLockButtonStyle() {
var icon = $('#LockButton')
var hasLock = icon.hasClass('fa-lock');
if(hasLock) {
icon.removeClass('fa-lock').addClass('fa-unlock');
} else {
icon.removeClass('fa-unlock').addClass('fa-lock');
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button
onClick='changeLockButtonStyle()'
id="LockButton"
class="fa fa-lock"
>
</button>
</body>
添加回答
举报
0/150
提交
取消