IT技术 - 像按钮一样react切换 - 吾爱随笔录

我有一个带有状态的组件：{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;

它只是不断地添加喜欢。

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;