onClickを使用してフェードインしてフェードアウトする

Question

クリックイベントが発生したときに背景色を表示しようとしていますが、1〜2秒後に背景色をフェードアウトする必要はありません。

基本的には、私はactiveのプロパティがcssではなくclickイベントに対して何をしたいのですか。

私の現在のアプローチでは、バックグラウンドカラーをフェードアウトするために2度目のクリックイベントを発生させる必要があります。私はワンクリック

私のアプローチ

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; 
} 

Answer 1

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') 
); 

Answer 2

でこれを行うことができますどのように戻ってそれを変更するには、タイムアウトを設定することにより、これを行うことができます。

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); 
} 

あなたが太っ矢印機能を使用できない場合は、selfのような変数にthisを割り当て、タイムアウトハンドラ内からself.setStateを呼び出すことができます。あなたのコード1つのミスで