2022年5月13日りあクト！第7章単方向データフロー（p.108~)

単方向データフローとは

Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。

双方向バインディング

親コンポーネントと子コンポーネント間でデータの共有する方法です。

双方向バインディングを使用すると、親と子コンポーネント間でデータが同時に更新されます。

Reactでは双方向バインディングの機能は備えておらず、単方向データフローを採用しています。

Reactでフォームを実装する場合

親コンポーネントでフォームデータのstateを定義する。
stateを変更する関数を定義し、子コンポーネントにpropsとして渡す。
子コンポーネント側で入力データを関数の引数として渡して実行し、stateを更新する。

↓フォームの例

import { useState } from "react";

import "./styles.css";

export default function App() {
  const [state, setState] = useState("");

  const handleSubmit = () => {
    alert(state);
  };

  const handleChange = (e: any) => {
    console.log(e.target.value);
    setState(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>　
      <label>
        Name: 　　　
        <input
          type="text"
          name="name"
          value={state}
          onChange={(e) => handleChange(e)}
        /> 　　　　　　
      </label>　　　　　
      <input type="submit" value="Submit" />　　　　　　　
    </form>
  );
}