更改字体真棒按钮样式 onClick答案

【问题标题】：Changing Font Awesome Button Style onClick更改字体真棒按钮样式 onClick
【发布时间】：2020-09-13 18:00:02
【问题描述】：

我有一个样式为 Font Awesome 的按钮。

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

我正在尝试找到一种将样式更改为<FaLockClosed /> 的方法，通过在线阅读，我看到的唯一示例是关于 JQuery 和 class=”fas fa-lockclosed” 切换类。但我使用的是按钮，而不是普通图标。我试过document.getElementById('LockButton').innerHTML= '<FaLockClosed />' 但不起作用。如果可能，我想避免使用 JQuery。

【问题讨论】：

您是否尝试过仅删除当前类并用新类替换它以更改样式？
@Souhailhimself 但是上面的例子不是设置类号吗？它使用 FA 的 npm install 设置。我刚刚尝试了您的解决方案并使用了样式表和``` ` `` 但是，没有图标显示，它是一个空按钮。

标签： javascript font-awesome

【解决方案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>
    );
}

【讨论】：

const [isLocked, setIsLocked] = useState(false); 去哪儿了？如果将它放在类上方，我会收到无效的钩子错误。
在类组件中，您以不同的方式进行操作。我更新了答案。
谢谢！它现在正在工作。我可以将它用于多个按钮吗？我只需要向构造函数添加多个“锁定”状态吗？
取决于您的需求。如果一键锁定所有按钮：是的。如果单击应该锁定特定按钮，那么您需要为每个按钮声明单独的状态。

【解决方案2】：

我的最佳实践解决方案是使用 css 类。但是如果你做不到，你可以使用由 javascript 变量控制的 2 个图标的显示状态。

【讨论】：

你能举个例子吗？

【解决方案3】：

如果您使用 react 或 angular，我将根据按钮按下期间设置的变量来切换组件。

关于如何在反应中进行切换的参考 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>

【讨论】：

可能会走这条路，但是没有JQuery有可能吗？
你可以尝试像 stackoverflow.com/a/43824723/14167216 或类似 stackoverflow.com/a/26736704/14167216 那样做原始的 javascript
如果使用 react 或 angular，只需根据单击按钮时设置为 falsy 或 thuthy 的变量切换组件