更改字體真棒按鈕樣式 onClick

Question

我有一個按鈕樣式為 Font Awesome。

              <button
                onClick={this.changeLockButtonStyle}
                id="LockButton"
                >
                <FaLockOpen />
              </button>

我試圖找到一種方法將樣式更改為<FaLockClosed />從在線閱讀我看到的唯一示例是關於 JQuery 和 class=”fas fa-lockclosed” 切換類。 但我使用的是按鈕，而不是普通圖標。 我試過document.getElementById('LockButton').innerHTML= '<FaLockClosed />'但不起作用。 如果可能，我想避免使用 JQuery。

Answer 1

干得好：

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>
    );
}

Answer 2

我的最佳實踐解決方案是使用 css 類。 但是如果你不能這樣做，你可以使用由 javascript 變量控制的 2 個圖標的顯示狀態。

Answer 3

如果您使用 react 或 angular，我只會根據按下按鈕期間設置的變量來切換組件。

關於如何在 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>

更改字體真棒按鈕樣式 onClick

問題描述

3 個解決方案

解決方案1
2 已采納 2020-09-13 18:27:49

解決方案2
0 2020-09-13 18:05:35

解決方案3
0 2020-09-13 18:15:30

更改字體真棒按鈕樣式 onClick

問題描述

3 個解決方案

解決方案1 2 已采納 2020-09-13 18:27:49

解決方案2 0 2020-09-13 18:05:35

解決方案3 0 2020-09-13 18:15:30

解決方案1
2 已采納 2020-09-13 18:27:49

解決方案2
0 2020-09-13 18:05:35

解決方案3
0 2020-09-13 18:15:30