更改 Font Awesome 按钮样式 onClick

Question

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

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

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

Answer 1

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

Answer 2

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

关于如何在 React 中进行切换的参考

这是一个 jQuery 示例。您可以在按钮上设置class，然后检查按钮是否有class。如果它有锁 class 则更改为解锁 class 和 vice-versa。检查下面的示例代码。

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>

Answer 3

给你：

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

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

更新：这就是你在 class 组件中的做法。

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

更改 Font Awesome 按钮样式 onClick

Changing Font Awesome Button Style onClick

javascript

font-awesome