Question

我正在尝试将按钮的类别更改为显示喜欢/不喜欢的图标，即使从chrome开发工具观察到状态发生变化时，图标似乎也没有变化。

    import React, { Component } from "react";
    import { connect } from "react-redux";
    import classnames from "classnames";
    import { addLikeToPost } from "../../../actions/postActions";
    import TextFieldGroup from "../../common/TextFieldGroup";

    class Postpanel extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isliked: this.props.post.isLiked
        };
      }

      toggleBox = () => {
        this.props.toggleCommentBox(this.props.index);
      };

      addLike = () => {
        this.props.addLikeToPost(this.props.post._id);
        this.setState(prevState => ({
          isliked: !prevState.isliked
        }));
      };

      render() {
        const likeIcon = this.state.isliked == true ? "fa fa-thumbs-up" : "fa fa-heart";

        return (
          <div className="card mb-4 hidden-md-down">
            <div className="card-footer">
              <div className="row">
                <div className="col-xs-6 col-sm-6 col-md-6">
                  <div className="text-center">
                    <button className="btn btn-pill btn-secondary" onClick={this.addLike}>
                      <i className={likeIcon} /> Like
                    </button>
                  </div>
                </div>
                <div className="col-xs-6 col-sm-6 col-md-6">
                  <div className="text-center">
                    <button className="btn btn-pill btn-secondary" onClick={this.toggleBox} type="button">
                      <i className="fa fa-comment-o" aria-hidden="true" /> Comment
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

    const mapStateToProps = state => ({
      auth: state.auth,
      errors: state.errors
    });

    export default connect(
      mapStateToProps,
      { addLikeToPost }
    )(Postpanel);

我正在尝试使用likeIcon常量更改按钮图标。

编辑：深入研究后，我发现了问题。我有一个fontawesome js文件，该文件弄乱了渲染。这里发布的所有解决方案都是正确的。

Answer 1

您可以像

<i className={'fa ' + (this.state.isliked ? 'fa-thumbs-up' : 'fa-heart')} />

并按如下所示更改addLike方法

addLike = () => {
    this.props.addLikeToPost(this.props.post._id);
    this.setState({
        isliked: !this.state.isliked
    });
};

请尝试相同操作，并让我知道它是否无效

Answer 2

在这种情况下，您似乎不需要使用state。只需使用传入的props：

import React, { Component } from "react";
import { connect } from "react-redux";
import classnames from "classnames";
import { addLikeToPost } from "../../../actions/postActions";
import TextFieldGroup from "../../common/TextFieldGroup";

class Postpanel extends Component {

  toggleBox = () => {
    this.props.toggleCommentBox(this.props.index);
  };

  addLike = () => {
    this.props.addLikeToPost(this.props.post._id);
  };

  render() {
    const likeIcon = this.props.post.isLiked == true ? "fa fa-thumbs-up" : "fa fa-heart";

    return (
      <div className="card mb-4 hidden-md-down">
        <div className="card-footer">
          <div className="row">
            <div className="col-xs-6 col-sm-6 col-md-6">
              <div className="text-center">
                <button className="btn btn-pill btn-secondary" onClick={this.addLike}>
                  <i className={likeIcon} /> Like
                </button>
              </div>
            </div>
            <div className="col-xs-6 col-sm-6 col-md-6">
              <div className="text-center">
                <button className="btn btn-pill btn-secondary" onClick={this.toggleBox} type="button">
                  <i className="fa fa-comment-o" aria-hidden="true" /> Comment
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { addLikeToPost }
)(Postpanel);

然后，您的减速器应将帖子设置为isLiked=true。

Answer 3

我最初将状态设置为false：

this.state = {
  isliked: false
};

我会将addLike更改为handleLike，以便您可以根据现有状态在true和false之间切换：

handleLike = () => {
  this.props.addLikeToPost(this.props.post._id);
  this.setState({ isliked: !this.state.isliked });
}

，只需将按钮更改为：

<button className="btn btn-pill btn-secondary" onClick={this.handleLike}>

this.setState不重新呈现按钮图标

3 个答案: