javascript - 像按钮一样 react 切换

Question

我有一个组件，其状态为:{likes: 123} 我在“喜欢”按钮旁边显示喜欢的数量。 如何实现此按钮的功能，因此当我单击它一次时，它会添加喜欢(因此 state.likes = 124)，然后如果我想第二次单击它，它会返回到之前的状态(state.likes = 123)。当然，它始终显示正确的点赞数。这是我到目前为止所得到的:

class ProfileInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      likes: this.props.likes,
    };
  }
  handleLike = () => {
    this.setState(prevState => ({
      likes: prevState.likes + 1,
    }));
  }
  render() {
    return (
      <div>
        <button className="like-button" onClick={this.handleLike}>
          Like
        </button>
      </div>
    );
  }
}

export default ProfileInfo;

它只是不断地增加点赞。

Answer 1

您可以执行以下操作。

Here is a codesandbox具有更完整版本的代码。

import React from 'react';

class Likes extends React.Component {

  constructor(props){

    super(props);
    this.state = {
      likes: 124,
      updated: false
    };

  }

  updateLikes = () => {

    if(!this.state.updated) {
      this.setState((prevState, props) => {
        return {
          likes: prevState.likes + 1,
          updated: true
        };
      });

    } else {

      this.setState((prevState, props) => {
        return {
          likes: prevState.likes - 1,
          updated: false
        };
      });

    }
  }

  render(){

    return(
      <div>
        <p onClick={this.updateLikes}>Like</p>
        <p>{this.state.likes}</p>
      </div>
    );
  }
}

export default Likes;