【超初心者】React のcontextAPIを使ってみる

はじめに

reactのcontextAPIについて勉強したのでメモ。

最終的には文字を入力して、submitを押すと入力した文字が出てくるようにして、todoアプリのようにしたいのですが、そこにくる前に力着きました。
現状では、文字を入力するとその文字が表示されてます！
初心者なので間違ってたりしたり、アドバイスがあったらコメントよろしくお願いします。

コードは親コンポーネントのApp.jsの中に、inputやsubmitできるbuttonなどがあるform.js と　入力された文字がPrivider Consumerを通して渡されて表示されるtodo.jsの2つが子コンポーネントとしてあります。

参考記事

React Context APIについて

先に上記の記事を読んで、違うバージョンのcontextAPIを見てみたいと思った人用です。上記の記事がめちゃくちゃわかりやすかったです！！しかも動画つき。

実装方法

npm init react-app contextAPI

作った物を yarn start します。

ファイルの構造は

-- App.js
-- src
がありsrcの中にcomponents,contexts
components の中に　form.js todo.js
contexts の中に　formContext.js

ディレクトリのわかりやすい書き方がわかりませんでした。見にくくてすみません。

コード

App.js

import React from "react";
import "./App.css";
import Form from "./components/form";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
  }

  render() {
    return (
      <div className="App">
        <h1>hello</h1>

      <Form />
      </div>
    );
  }
}

export default App;

src/conponents/form.js

import React from "react";
import Todo from "./todo";
import FormContext from "../contexts/formContext";

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
      text: ""
    };
  }

  onSubmit = event => {
    this.setState({ text: this.state.text });
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(event.target.value)
  };
  render() {
    return (
      <div>
        <input
          type="text"
          name="text"
          onChange={this.handleChange}
        />
        <button
          onClick={this.onSubmit}>submit</button>

        <FormContext.Provider value={this.state}>
          <Todo />
        </FormContext.Provider>
      </div>
    );
  }
}
export default Form;

FormContext.Providerでvalueとして上のconstructorのtextをtodo.jsに渡してます。textだけじゃなくて、handleChange、onSubmit　などの関数も渡せます。

src/components/todo.js

import React from "react";
import FormContext from "../contexts/formContext";

const Todo = () => (
  <FormContext.Consumer>
    {({ text }) => {
      console.log(text);
      return <div>{text}</div>;
    }}
  </FormContext.Consumer>
);
export default Todo;

ここではtextを受け取ってます。つまり、inputで入力された文字を受け取ってます。

src/contexts/formContexts.js

import { createContext } from "react";

const FormContext = createContext();
export default FormContext;

ここはあまり詳しくわからなかったのですが、Providerとconsumerの間で処理している物らしいです。