像按鈕一樣的反應切換

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;