React

React - State

GW最終日です。GOできなかった。。

今日もこちら。

https://oukayuka.booth.pm/items/1312652

柴咲先生です。

プロジェクト作る

$ npx create-react-app counter-test --typescript

 

Local State

  • コンポーネントが内部に持つ状態のこと

本のサンプルだけど（GitHubの方は見てない〜）

import { Button, Card, Statistic } from 'semantic-ui-react';

これだけじゃ、画面が装飾されなくて

$ yarn add semantic-ui-css

これも必要だった。これ入れたら装飾された。

importは

import { Button, Card, Statistic } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

こう。

 

this.State
  constructor(props: {}) {
    super(props);
    // this.state ここ大事
    // 初期化している
    this.state = { count:0 };
  }
setState()
  • 「setState = hoge」State を設定する。値を固定したいときに使う。
  • 「(hogeState, props) => newState」StateとPropsを引数で受け取り新しいStateを返す関数。動的に変更したい場合に使う。

動的に変更したい場合

  increment() {
    // this.stateに値を入れることはできない
    // this.stateで参照はできる
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }

↑ Propsは省略している。

 

親のコンポーネントの中身を変えたいとき
  • コンポーネントは単方向データフロー
  • Reactではデータは必ず親コンポーネントから子コンポーネントへ一方向
  • 下の階層から上の階層にデータの変更を反映することはできない

下の階層から上の階層にデータの変更を反映することはできないけど、親コンポーネントが自身の状態を変更する関数を子コンポーネントに渡して変更するというやり方がある

  <Button color="blue" onClick={() => this.increment()}> 
    +1
  </Button>

「() => this.increment() 」LacalStateの値を１加算する関数を、子コンポーネントにPropsで渡して、コンポーネント内部のClickイベントに仕込んで上の階層の関数を発火させるってことができる。

 

this挙動の確認
  <Button color="blue" onClick={() => this.increment()}>

↓

  <Button color="blue" onClick={this.increment}>

this.setState なんてないよと言われる。

↓ 関数定義で書いているから this.setState ないって言われる（関数でかくとthisは実行時のオブジェクトになるから）

  increment() {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }

↓  アロー関数に書き換える

  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }
SyntheticEvent型で定義する

公式ページ

ちょっとわかりやすいかも（古いけど）

  decrement() {
    this.setState(prevState => ({
      count: prevState.count - 1,
    }));
  }

↓

  decrement = (e: SyntheticEvent) => {
    e.preventDefault();
    this.setState(prevState => ({
      count: prevState.count - 1,
    }));
  }

メソット内部で操作するときに、イベントハンドラのオブジェクトを引数として受け取れる。

エラーになった

  <Button color="pink" onClick={() => this.decrement()}>

↓

  <Button color="pink" onClick={this.decrement}>

 

-React