週3 -トグルアプリ

3841 ワード
react hook usestate テキストリンク

反応曲線の週3へようこそ


こんにちは、開発者!また会えてうれしい.
これは反応曲線であり、オープンソースプロジェクトであり、私は大規模プロジェクトを構築するためのコンセプトを理解している方法で、小さなUIコンポーネントを共有し始めることができます.

トグルアプリ



今週、我々は、トグルアプリを作成し、コンテンツを非表示にするときに反応ボタンをクリックします.
トグルコンポーネントを作成するにはしなければなりません.
  • ボタンステータスを保持する状態を作成します.
  • ボタンのステータスのいずれかが表示されます.
  • ボタンをクリックすると、SetShowメソッドを起動します.
  • setshowメソッドは現在のshow状態を反転します.
  • 表示状態がtrueの場合、画面に「H 2」を表示し、「ボタンを押してください」ボタンを切り替えます.
  • が表示状態が偽ならば、メッセージをスクリーンに表示しないで、ボタン
    • に「歓迎」をトグルしてください

    コード


    import React, {useState} from 'react';

const Toggle = () => {
    const [show, setShow] = useState(true);

    return (
        <div className="showHide">
            <h2>Toggle</h2>
            <div>
                <button onClick={() => setShow(!show)}>
                    {show ? "Hide Welcome" : "Show Welcome"}
                </button>
                {show && <h2>Hi, How are you ? </h2>}
            </div>
        </div>
    );
}

export default Toggle;

    結論


    読んでいただきありがとうございます、任意の貢献は、以下のスレッドで歓迎以上です!
    Live Preview
    Source Code
    脚本を用いた電子アプリのテスト
    [開発プロセス]宣言と算術ノードのテスト