像按钮一样的反应切换

Question

我有一个组件的状态：{likes：123} 我显示喜欢的数量旁边的'喜欢'按钮。 如何为此按钮实现功能，因此当我单击它时，它会添加到likes（所以state.likes = 124），然后如果我想再次单击它，它将返回到之前的状态（状态。 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;