反応基本

ちょっと開発者、反応基本シリーズの第3部へようこそ.我々は反応プロジェクトを設定することを学び、さまざまな種類の反応コンポーネントを見ました.約束されたこの部分では、コンポーネントの状態について学びます.
構成要素の状態
以前の部分で議論されるように、反応はHTMLテンプレートで変数の値をレンダリングする能力を持っています.このfuntionalityは、コンポーネントの状態の助けを借りて実行されることができます.
例を挙げましょうCart コンポーネント.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

Localhost

ここで、ジョンはテンプレート(レンダリング関数で)にハードコード化されます.しかし、この名前を言いましょうJohn ユーザーがWebアプリケーションと対話するときに変更する必要があります.これをするために、我々はコンポーネント状態の驚くべき力を使います.この変更された名前を保持する変数を定義することができます.そうしましょう.
その前に、クラスのコンストラクタがどのように動作するかの基本的な考え方を理解する必要があります.
コンストラクタは、単純な単語で、クラスが呼ばれるとすぐに実行する命令のセットです.これらの命令は、アプリケーション/コンポーネントおよび多くのために重要なデータを格納するAPIを呼び出す重要な変数を作成することができます.この場合、コンポーネントの状態を初期化します.以下のスニペットを分析しましょう.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    constructor () {
        this.state = {}
    }

    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

あなたはconstructor レンダリングメソッドの前のキーワード.これはJavaScriptの特定のクラスのコンストラクターを定義する方法です.カーリーブレースの内部では、コールで実行するすべての命令を定義します.ここで変数を初期化するのを見ることができますthis.state に指定されます.まあ二つの巻き😕. これは実際にJavaScriptでオブジェクトを定義する方法です.
オブジェクトは、値に割り当てられた通常の変数と同様に、キーの値のペアのコレクションです.単純な単語では、変数のコレクションのように動作します.変数のように、オブジェクトのキーを呼び出し、割り当てられた値を得ることができます.現在、内部this.state オブジェクトは、テンプレートで使用するすべての変数を作成します.コードスニペットで理解しましょう.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    constructor () {
        this.state = {
            first_name: "John"
        }
    }

    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

ここでキーを作成しましたfirst_name と文字列の値を割り当てた"John" それに.このキーを呼ぶのはかなり簡単です.私たちが学んだように、オブジェクトは重要な値ペアのコレクションです.この場合、変数に格納しますthis.state . オブジェクト内のキーを呼び出すには、まずオブジェクトを保持する変数を参照して、呼び出したいキーの名前を参照します.オブジェクトのキーを参照する複数の方法があります

通常使用object.<key_name> 方法

インデクシング方法の使用

// Object
this.state = {
    first_name: "John"
}

// Method 1
this.state.first_name

// Method 2
this.state["first_name"]

しばらくの間、メソッド1を使用します.その後、状況が発生すると、メソッド2を使用します.はい!これらの方法はいくつかの状況に基づいて使用しなければならない.それは複雑ではない、我々はこれを行うことができます!
電話しましょうfirst_name HTMLテンプレートのキー.これを行うには奇妙な構文を使用する必要があります.下記のスニペットを分析しましょう.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "John",
    };
  }

  render() {
    return <div>Hello, {this.state.first_name}</div>;
  }
}

上記のコードスニペットでは、Render関数内で変数がどのように呼び出されるかを見ることができます.Curlyブレースを使用し、呼び出したい変数の名前を書く必要があります.
少し疑わしく感じるさま🧐?

ライン番号5をチェックしてください.あなたはsuper() キーワード.これは、React.Components オブジェクト.なぜそこにあるのだろうかthis 前のキーワードstate 変数.The this キーワードは、クラスで作成されたオブジェクト、変数および関数にアクセスするために使用されます.はい、直接アクセスできませんstate 変数.今すぐブラウザをチェックしてください.何も変更されていません.first_name キー、私たちは言うSarah .

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  render() {
    return <div>Hello, {this.state.first_name}</div>;
  }
}

Localhost

厳熙😉, それがどのように新しい価値に変わったかについて見てくださいSarah . これは、動的にHTMLをレンダリングする方法です.方法については、このレベルを取る.

最初の1 -の値を変更するボタンを追加しましょうfirst_name をクリックします.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

ステップ2 -名前を変更する関数を作成します.
反応コンポーネントでは、別のタスクの異なる関数を作成し、HTMLテンプレート内でそれらを呼び出すか、通常もそれを呼び出すことができます.これを行う関数を作成します.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

whoa whoa What何がちょうど起こったか😵

うん、ちょうど機能を追加しました.
JavaScriptに精通している場合は、どこにいるのだろうかfunction キーワード.ここではどのように反応作品は、“もの”を見ただけの矢印機能と呼ばれています.矢印機能をクリックしたい場合はhere . クラスの変数にアクセスしなければならない場合、this オブジェクト.しかし、クラス内で関数を作成すると、this オブジェクト.今我々がバインドまたはネクタイthis オブジェクトがクラス内で関数を作成するたびに、関数内でアクセスできます.これは反応のようなものです.結合する複数の方法がありますthis オブジェクト.以下はそれを示す簡単な断片です.

// Method 1
export default class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            first_name: "John"
        }
        this.change_name.bind(this);
    }

    change_name = function () {
        // do something
    }

    render () {
        return (
            <h1>Hello, { this.state.first_name }</h1>
        )
    }
}

// Method 2
export default class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            first_name: "John"
        }
    }

    change_name = () => {
        // do something
    }

    render () {
        return (
            <h1>Hello, { this.state.first_name }</h1>
        )
    }
}

メソッド1では、関数を作成する通常の構文を使用します.しかし、メソッド2では、関数を作成するために矢印関数を使用しました.メソッド1を使用している間、手動でthis 関数はconstructor とbind 関数.しかし、これはメソッド2の場合ではなく、関数に自動的にバインドされます.このシリーズではメソッド2を使用します.私たちは戻って我々のアプリを取得しましょう.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

これは私たちだった場所です!
インサイドchange_name 関数Iはいくつかのコードを追加しました.反応では、状態キーの値を直接再利用することはできません.私たちはsetState 関数は、状態を変更します.だから、単に呼び出すことができますthis.setState() 関数は、キーをキーとしてオブジェクトに渡し、値の後に値を変更するキーを新しい値とします.

ステップ3 -バインドchange_name ボタンの機能

src/component/Cart.jsx

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button onClick={this.change_name}>Change name</button>
      </>
    );
  }
}

我々は、使用するつもりですonClick 属性<button> 要素.属性の値は曲線括弧の内側でなければならず、関数を括弧で呼び出しないように注意してください.関数名の後に括弧を追加すると、コンポーネントがレンダリングされた直後に呼び出されます.
ブラウザをチェックする時間です

Localhost -- before

Localhost -- after

それはtodayyyy!
コメントとしてクエリをドロップします.
あなたの時間をありがとう☺️