3 回答

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊
干得好:
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貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
我的最佳實(shí)踐解決方案是使用 css 類。但如果你做不到,你可以使用由 javascript 變量控制的 2 個(gè)圖標(biāo)的顯示狀態(tài)。

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果您使用反應(yīng)或角度,我只會(huì)根據(jù)按下按鈕期間設(shè)置的變量切換組件。
有關(guān)如何在 React 中進(jìn)行切換的參考 https://stackoverflow.com/a/46425155/14167216
這是一個(gè) jQuery 示例。您可以在按鈕上設(shè)置類,然后檢查按鈕是否有類。如果它有鎖定類,則更改為解鎖類,反之亦然。檢查下面的示例代碼。
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>
添加回答
舉報(bào)