リアクション - 待つ方法とフェードアウトする方法は？

Question

私は、ユーザーが正常に加入していることを確認する警告ボックスを持っている：ユーザーが電子メールを送信すると

<div className="alert alert-success"> 
    <strong>Success!</strong> Thank you for subscribing! 
</div>  

、私は真の「サブスクライブ」状態を変更しています。加入状態が2秒

ため

待ち真であるとき

• 警告ボックスを表示し、それは私がどのように行うことができます

をフェードアウトしてください：にあるが、私は何をしたい

この？

Answer 1

ReactはデータをDOMにレンダリングするので、最初に値を1つ、次に値を持つ変数を保持し、次にメッセージを最初に表示して非表示にする必要があります。 jQueryのfadeOutで直接DOM要素を削除できますが、manipulating DOM can cause problemsです。

したがって、考えられるのは、2つの値のいずれかを持つ特定のプロパティがあることです。最も近い実装はブール値です。メッセージボックスは常にDOM内にあるので、それはいくつかの要素の子です。 Reactでは、要素はコンポーネントをレンダリングした結果であるため、コンポーネントをレンダリングすると、必要な数の子を持つことができます。メッセージボックスを追加することができます。

次に、このコンポーネントには簡単に変更できるプロパティが必要です。コンポーネントを変更するとすぐに、新しいデータでコンポーネントが再描画されることを完全に確実に確認する必要があります。それはコンポーネントの状態です！ここで

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showingAlert: false 
    }; 
    } 

    handleClickShowAlert() { 
    this.setState({ 
     showingAlert: true 
    }); 

    setTimeout(() => { 
     this.setState({ 
     showingAlert: false 
     }); 
    }, 2000); 
    } 

    render() { 
    return (
     <div> 
     <div className={`alert alert-success ${this.state.showingAlert ? 'alert-shown' : 'alert-hidden'}`}> 
      <strong>Success!</strong> Thank you for subscribing! 
     </div> 
     <button onClick={this.handleClickShowAlert.bind(this)}> 
      Show alert 
     </button> 
     (and other children) 
     </div> 
    ); 
    } 
} 

は、コンポーネントの状態のshowingAlertプロパティの値（truthiness）に応じて、どちらかalert-shownまたはalert-hiddenクラス名が設定され、メッセージボックスのために、それを見ることができます。 transition CSS propertyを使用すると、見た目を隠したり見せたりするのを滑らかにすることができます。

したがって、ユーザーがメッセージボックスを表示するためにボタンをクリックするのを待つのではなく、明らかに特定のイベントのコンポーネント状態を更新する必要があります。

これはまずは​​うまくいくはずです。次に、CSSトランジション、display、heightのメッセージボックスのCSSプロパティを試してみてください。メッセージボックスの動作やスムーズな移行が起こっているかどうかを確認してください。

幸運を祈る！

PS。 a Codepen for thatを参照してください。