Question

我有一个样式为“真棒字体”的按钮。

我正在尝试找到一种将样式更改为Enter a value: Enter a value: Enter a value: Enter a value: Enter a value: Enter a value: Positive integers: 4 Negative integers: 1 Sum: 2310 Average: 577.5的方法。通过在线阅读，我看到的唯一示例是有关JQuery和class =“ fas fa-lockclosed”切换类的。但是我使用的是按钮，而不是普通的图标。我已经尝试过<button onClick={this.changeLockButtonStyle} id="LockButton" > <FaLockOpen /> </button>，但是没有用。我想尽可能避免使用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，我只是根据按下按钮期间设置的变量来切换组件。

有关如何进行切换的参考 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 个答案: