使用 classNames 模块动态设置 class 无效

Question

提前感谢您查看此内容。我正在尝试将我的元素的页面加载 class 设置为挂起，然后单击，删除挂起的 class 并添加完成的 class:

目前，完成状态和待处理状态相应变化；然而，classes 没有改变（pending 仍然活跃 class 而 completed 不活跃）。任何帮助将不胜感激！

import React, { Component } from 'react';
import classNames from 'classnames';
import '../stylesheets/Task.css';

class Task extends Component {
  constructor(props) {
    super(props);

    this.state = {
      completed: false,
      pending: true
    }

    this.makeComplete = this.makeComplete.bind(this);
  }

  makeComplete() {
    if (this.state.pending) {
      this.setState({
        completed: true,
        pending: false
      }, () => {
        console.log('completed: ' + this.state.completed, '\npending: ' + this.state.pending);
      });
    }
  }

  render() {
    return (
      <div className="task">
        <div className="check-task-container" onClick={this.makeComplete} >
          <i className={classNames({
            completed: this.state.completed,
            pending: this.state.pending,
            far: true,
            'fa-circle': true
        })} ></i>
        </div>
        {this.props.title}
      </div>
    );
  }
}

Answer 1

如果我没理解错的话，您需要更改事件 onClick 的类名。

如果是这样，请像下面这样在 makeComplete 中更改您的 setState：

this.setState({
        completed: !this.state.completed,
        pending: !this.state.pending
      });

或

this.setState((prevState) => {
  return {completed: !prevState.completed, pending: !prevState.pending};
});

working demo

中的完整代码

Answer 2

这个问题确实与 i 元素到 svg 的 fontawesome 转换有关，因为 React 在渲染时不知道元素的变化。为了解决这个问题，我不得不使用 fontawesome 节点模块 (https://www.npmjs.com/package/@fortawesome/react-fontawesome) 而不是使用 fontawesome CDN。

使用 classNames 模块动态设置 class 无效

Set class dynamically using classNames module not working

class

dynamic

class-names

reactjs