更改字体真棒按钮样式 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