使用onClick淡入淡出轉換

我試圖在發生點擊事件時發生背景顏色轉換，並且沒有進一步的交互，在1或2秒後淡出背景顏色。使用onClick淡入淡出轉換

基本上我想要做什麼active屬性在CSS中，但對於點擊事件。

我目前的方法需要點擊事件第二次淡出背景顏色。我怎樣才能在點擊

我的做法

handleClick(id) { 
     this.setState({ 
      active: !this.state.active 
     }) 
    } 

    <div className={this.state.active ? "txt_vote_bar_div txt_vote_bar_div_active" : "txt_vote_bar_div txt_vote_bar_div_notactive"} 
     onClick={this.handleClick()}> 
    </div>

我的CSS

.txt_vote_bar_div { 
    width: 100%; 
    height: 50px; 
    min-height: 50px; 
    position: relative; 
    border: 1px solid #C6C6C6; 
    border-radius: 5px; 
    margin-bottom: 10px; 
    cursor: pointer; 
} 

.txt_vote_bar_div_active { 
    background-color: #001f3f; 
    transition: 1s ease-in-out; 
} 

.txt_vote_bar_div_notactive { 
    background-color: #FFFFFF; 
    transition: 1s ease-in-out; 
}

來源

2017-08-24 CraZyDroiD

您正在調用處理函數而不是傳遞一個ref。這個'onClick = {this.handleClick（）}'應該改爲這個'onClick = {this.handleClick}' –

@CraZyDroiD請找到我的答案，並讓我知道你是否有任何問題。 –

Please find running example

在你的代碼是一個錯誤，你這樣做即的onClick = {this.handleClick（）} 所以由於這個以後每隔使你的點擊事件被觸發。

這就是我所做的。

class Hello extends React.Component { 
    state = { 
     active: false 
    } 
    handleClick(e) { 
     this.setState({ 
      active: !this.state.active 
     }); 
     setTimeout(() => { 
      this.setState({ 
       active: !this.state.active 
      }); 
     }, 1000); 
    } 
    render() { 
     return ( 
      <div className = { this.state.active ? "txt_vote_bar_div txt_vote_bar_div_active" : "txt_vote_bar_div txt_vote_bar_div_notactive" } onClick = { this.handleClick.bind(this) }></div> 
     ); 
    } 
} 

ReactDOM.render(< 
    Hello initialName = "World"/> , 
    document.getElementById('container') 
);

來源

2017-08-24 09:57:07

做到這一點，您可以通過設置超時改回去做。

handleClick(id) { 

     this.setState({ 
      active: !this.state.active 
     }); 

     // The timeout will trigger after 1000ms. Use a fat arrow function 
     // to keep the same reference to this. 
     setTimeout(() => { 
      this.setState({ 
       active: false 
      }); 
     }, 1000); 
}

如果您不能使用脂肪箭頭功能，您可以分配this像self一個變量，然後從超時處理程序中調用self.setState。

來源

2017-08-24 09:43:22 Thijs

使用onClick淡入淡出轉換

回答

相關問題