更改字体真棒按钮样式 onClick

Question

I have a button styled as a Font Awesome.我有一个按钮样式为 Font Awesome。

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

I'm trying to find a way to change the style to <FaLockClosed /> From reading up online the only examples I see are regarding JQuery and class=”fas fa-lockclosed” toggle class.我试图找到一种方法将样式更改为<FaLockClosed />从在线阅读我看到的唯一示例是关于 JQuery 和 class=”fas fa-lockclosed” 切换类。 But I am using a button, not the normal icon.但我使用的是按钮，而不是普通图标。 I have tried document.getElementById('LockButton').innerHTML= '<FaLockClosed />' but doesnt work.我试过document.getElementById('LockButton').innerHTML= '<FaLockClosed />'但不起作用。 I'd like to avoid using JQuery if possible.如果可能，我想避免使用 JQuery。

Answer 1

Here you go:干得好：

const [isLocked, setIsLocked] = useState(false);

return (
    <button
        type="button"
        onClick={() => { setIsLocked(true); }}
    >
        {isLocked ? <FaLockClose /> : <FaLockOpen />}
    </button>
);

Update: Thats how you do it in class component.更新：这就是你在类组件中的做法。

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

My best practice solution is using css class.我的最佳实践解决方案是使用 css 类。 But if you can't do it , you can use display state for the 2 icons that controlled by a javascript variable.但是如果你不能这样做，你可以使用由 javascript 变量控制的 2 个图标的显示状态。

Answer 3

If you using react or angular, I would just toggle the component depending on a variable set during button pushed.如果您使用 react 或 angular，我只会根据按下按钮期间设置的变量来切换组件。

Reference on how to do the toggle in react https://stackoverflow.com/a/46425155/14167216关于如何在 react 中进行切换的参考https://stackoverflow.com/a/46425155/14167216

Here is a jQuery example.这是一个 jQuery 示例。 You can set the class on the button and then check if button has class.您可以在按钮上设置类，然后检查按钮是否具有类。 If it has lock class then change to unlock class, and vice-versa.如果它有锁定类，则更改为解锁类，反之亦然。 Check the sample code below.检查下面的示例代码。

 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