0.はじめに

なぜ記事を投稿するのか？

「プログラミング初心者にReactを触らせるな」
そういいたいけど、プログラマ人口が足りないバグのせいで
十分な研修がないまま実践投入されるって案件があるようです

GoogleでReactと調べると
「React 難しすぎる」
と出るほど…だから新人さんには進めたくない

そんな地獄みてぇな場所で働く新人を救いたいと思い情報提供します
ぜひ活用して、定時にあがる
少ない残業で帰れるようになってください

今回はコンポーネントクラスを使った開発になります
関数を使うパターンは後日記事にします

【DOM操作が分からない方へ（HTMLの属性を色々いじる操作）】
キミにはReactはまだ早い！
私が以前、解説記事があるので一読してください！

DOM操作解説

開発環境を作るのが面倒な方へ

こちらのサイトを利用して動かすことができます　CodePen

使い方
1)New Penで新しいプロジェクトを作る
2)JS横の歯車マークをクリック

3)Babelを選ぶ

4)Reactを検索してreactとreact-domを選ぶ

環境を揃えよう

じゃ、node.js入れて、その後…

っと言いたいけど、めんどくさい
PCに色々いれるの怖いって方向けに
~~（私は環境構築ニガテなので逃げたとは口が裂けてもいえない）~~

今回はCDNを使ってチャチャっと環境つくります

CDNとは？
簡単にいうと「Reactを動かせる環境をお借りすること」

ホント簡単なので一緒にやっていきましょう！

まずフォルダを作ります
次にそのフォルダ内にmain.htmlとroot.jsxを作ります

htmlのコードを置きますのでコピペ保存してね

main.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="root.jsx" ></script>
    <title>React</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

これでReactが動く環境ができました
以降はroot.jsxにコードを書いて動かします
※htmlはいじらないこと

次、VSCodeを入れます
これはプログラマ100人中90人は入れてるであろうソフトです
このVSCodeの拡張機能を使ってReactを動かせるようにします

VSCodeダウンロード

拡張機能はLive Serverを入れます

四角が4つ並んでるアイコンをクリックして
文字を打ち込めば検索できます

この機能でローカルサーバーをワンクリックで立ち上げることができます
（Reactを動かせるようにする）

拡張機能をいれますと、画面下にGo Liveと出ます
コードを書いたらこのGo Liveを押すとReactを動かせるようになります
（初回起動のみ）

※日本語化はJapanese Language Pack for Visual Studio Codeを入れてください
（なくても動きますが、作業が楽になります）

勉強のやり方

1.1は全部大事なので覚えるとして
1.2以降はソースコードにプラスして
大事なポイントで要点をまとめています

本心はコード全体を見てほしいけど
忙しい方が多いと思うのでね…私の善意を受け取ってください

1.画面表示

1.1画面を表示(べた書き)

まずは初歩から
今の状態で実行しても何も表示されないので
画面に色々表示させていきましょう

Hellow Reactを表示

See the Pen introductionReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

解説の前に、まずは全体のコードを載せときます
今後はコレを基に色々コード書いていきます。コピペして使ってくださいね

.jsx

//継承して色々いじる
class MyComponent extends React.Component{
  //初期設定
  constructor(props){
    //親クラスのコンストラクタを呼び出す(Reactの要素を使えるようにする)
    super(props);
  }
  
  //描画
  render(){
    return(
      <h1>Hello React</h1>
    );
  }
}

//コンポーネントを適応
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

こちら、テンプレートなので
分からない人が自分で色々変えようとすると
当然ながら、動かなくなります

理解度が足りないって方は、いじらないように

この画面みた瞬間に、やる気なくしたり
難しそうって思うよね…気持ちわかります

可能な限り簡単に説明するのでお付き合いください。

Reactの用語とコードをザックリ解説

コンポーネント
簡単にいうとReactを動かすパーツのことです
Reactではコンポーネントを作って、その中に処理を書きます

つまり、コンポーネントがないとReact使えないとことです

今回のサンプルはHellow Reactと表示しただけでしたが
あとあと、色々変化していきますのでお楽しみに

Jsx
これはJS内でHTMLタグを書くことができます
つまり、JSで画面に色々表示、削除ができるってことです。
（モダンなJSでもできるけど、こっちの方が慣れれば楽）

今回でいうところの、この部分がJSXです

.jsx

<h1>Hello React</h1>

Reactでよく使うので覚えてきましょう

では、具体的にコード内で何やってるか話します。
まずは、この部分から

.jsx

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

これはhtmlの要素(今回でいうとdivタグのid=root)
コレをクラスコンポーネントを使ってレンダリングしてくれという処理です

レンダリングってナニって方へ
ザックリ言うと「対象の値が更新されたら画面表示を更新する命令です」

次にレンダリングで指定しているクラスについて
ここで挫折する人、多いので可能な限り簡単に話します
（初心者にクラスをいじらせるヤツは、人の心がない）

.jsx

//継承して色々いじる
class MyComponent extends React.Component{
  //初期設定
  constructor(props){
    //親クラスのコンストラクタを呼び出す(Reactの要素を使えるようにする)
    super(props);
  }
  
  //描画
  render(){
    return(
      <h1>Hello React</h1>
    );
  }
}

まず、自作したクラスMyComponentを見ると
後ろに何か付いてますね(普通のクラスはclass クラス名のみ)

コレは継承って機能を使ってます

継承とは？
簡単にいうと「既にあるテンプレートをコピーして改造すること」

今回の場合は
React.Componentっていうクラスをコピーして改造していくぞってことです

次、constructor(props){}
コレはコンストラクタと言います

クラスを作った際に呼び出される関数です
この中で初期設定内容を書いていきます

Reactは最初に親クラス（React.Component）のコンストラクタを呼び出してます
この一行を呼び出すことで、自作したクラスがReactの機能を使えるようになります
必ずconstructor(props){}の一行目でsuper(props);を呼び出してください

最後、render(){}
レンダリング内容を書いてます
（画面表示、削除内容）

今まで説明したコードの流れを簡単に説明すると？

htmlの要素にレンダリングするように命令する
　→クラス内で初期設定を行う(テンプレート設定→自分の設定)
　→値の変更があると、レンダリングする

1.2画面を表示(変数)

Hellow Reactを表示

See the Pen textSetReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

constructor(props){
    //テキスト内容
    this.text = "Hello React";
  }
  
render(){
    return(
      <h1>{this.text}</h1>
    );
  }

コンストラクタで設定した変数をrender()関数で使ってますね
jsx内で変数を使う場合は **{変数名}**で書きます

今回の場合だとあまりメリット感じないかもですが
後々、ありがたみが分かってくると思います

1.3画面を表示(レンダリング)

チェックボックスの状態をテキストで画面に表示する

See the Pen changTextReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

constructor(props){
    //保存するもの一覧(変更時、画面が更新される)    
    this.state={
      //テキスト内容
      pText: "OFF"
    };
}

render(){
    return(
      <div>
        <p>チェックボックスは{this.state.pText}です</p>
    );
}

//チェックボックスのイベント発火
changeCheckbox(e){
    //テキスト変更用の変数
    let setText;
    
    //更新する色を指定
    if(e.target.checked){
      setText = "ON";
    }else{
      setText = "OFF";
    }
    
    //値を更新する
    this.setState({
      ["pText"]: setText
    });
}

レンダリングするためにReactのルールにそって値を扱う必要あります
まずはコンストラクタから

this.stateオブジェクト
この値が変更されるとレンダリング処理が走ります
今後は、このthis.stateオブジェクトを色々更新していくので、ぜひ覚えてください

次render関数
ここではthis.stateオブジェクトを使って画面に表示する内容を変えています
（今回で言うところのON、OFF表示）

最後changeCheckbox(e)関数
これはチャックボックスのonイベント発火で呼び出される関数です

ココで注目するのがthis.setState()関数
この関数でthis.stateオブジェクトを更新できます

今回の処理はチェックボックスのonイベント発火で値を更新しています
onイベントの使い方は2.3で解説してます

2.要素の属性を操作する

非表示に非活性などの操作
本来なら要素を取得して、更新するってのが流れです（DOM操作）
ですがReactではthis.stateオブジェクトを使うことで色々いじれます

※【警告】今後はHTMLの基本が理解できてる前提で話します
分からない人は、これ読んで！→DOM操作解説
（React学ぶ前に基本を押さえなきゃムリです、だから初心者はいじるなと…）

今回はサンプルとして、よく業務で使うモノをピックアップして紹介します

2.1テキストの表示非表示

テキストの表示、非表示をチェックボックスで切り替えます

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
    return(
        <p style={{display: this.state.setDisplay}}>表示</p>
    );
  }

styleを指定する場合、{}が二重になってることに注意してください
複数のプロパティーを指定する場合は後ほど説明しますのでお楽しみに(2.3で紹介)

2.2活性・非活性

入力の活性・非活性をチェックボックスで切り替えます

See the Pen textDisabledReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

constructor(props){
    //保存するもの一覧(変更時、画面が更新される)    
    this.state={
      textDisabled: false
    };
}

//描画
  render(){
    return(
        <input type="text"
          name = "testText"
          disabled={this.state.textDisabled}
        />
    );
  }

大事なポイントは2点

1)disableはtrue or false
2).jsxのinputタグは最後は/>

特に2)はよく間違えるからしっかりと覚えましょう！
（私も書き間違えて迷走したことが、かなりあります）

2.3マウスホバー(Onイベント)

PタグDivタグそれぞれがマウスホバー状態で表示が変わる

See the Pen textMouseHoverReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

本来なら大事なポイントって出したいところですが…
今回のコードはポイントが多すぎます

なので1つずつ関数に分けて説明していきます。
(分けて書きますが、大事な所を抽出したパターンになります)

コンストラクタ

.jsx

constructor(props){

    //保存するもの一覧(変更時、画面が更新される)    
    this.state={
      //それぞれのスタイル
      testP: {color: "black", background: "white"},
      testDiv: {color: "black", background: "white"}
    };
    
    //関数を正しく使えるようにする
    this.over = this.over.bind(this);
    this.out = this.out.bind(this);
}

大事なポイントは2点

1)this.stateにオブジェクトを入れている(style属性更新に使う)
2)自作関数でthis.setState()を使うために 関数を.bind(this) を指定する

2)はとても大事です。
コレを設定しないとエラー吐いて、正しくレンダリングできません
（何度、エラーを吐いたことか…）

次に進みます
render関数

.jsx

 //描画
  render(){
    return(
        <p style = {this.state.testP}
          id = "testP"
          onMouseEnter = {this.over}
          onMouseLeave = {this.out}
          >pTest</p>
    );
  }

大事なポイントは2点

1)style属性にオブジェクトを渡してプロパティーを一気に指定
2)onイベントの一部がHTMLと違う名称になっている

2)は動かないって事が多発する場所です
記述内容は正しいのに動かない…そう思ったら検索するといいですよ

最後
onイベント発火で呼ばれる関数（代表でover(e)）

.jsx

 //マウスホバーイベント発火
  over(e){
    //stateのstyleをコピー(参照渡し×)
    let setStyle = Object.assign({},this.state[e.target.id]);
    
    setStyle.color = "white";
    //テンプレートを指定して色を変更する
    setStyle.background = this.colorType[e.target.id];
    
    //値を更新する
    this.setState({
      [e.target.id]: setStyle
    });
  }

大事なポイントは

1)e.targetでonイベントを呼び出した要素の情報が取れる
2)this.state内にある配列、オブジェクトは参照渡ししない事

2）ですが参照渡しすると正しいレンダリングができなくなります
参照渡しダメ絶対

ちなみに e.target.idでオブジェクトのキーを指定してます
これでif文を書かずに変更内容を切り替えが可能になりますよ
余裕のある方は、ぜひ全体のコードを見よう

3.要素の生成・削除

モダンなJSのDOM操作なら生成、追加、削除を色んなメソッドを呼び出して実現します
ですが、Reactは違います

レンダリングとthis.stateで生成・削除を実現してます

もしReact（JSX）でモダンなDOM操作による生成・削除している人がいたら
わかってないか、何かしら理由があるのでしょう…突っ込んだら負けです

3.1要素を追加する

ボタンクリックでpタグを最大3個追加する

See the Pen addPtagReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
    
    //for文で回して作る
    let pList = [];
    for(let i=0; i < this.state.count; i++){
      pList.push(<p style={this.pStyle}>追加可能数:残り{this.state.text[i]}</p>);
    }
    
    //上限メッセージ
    if(this.state.buttonDisabled == true){
      let maxPStyle = Object.assign({},this.pStyle);
      maxPStyle.color = "red";
      pList.unshift(<p style={maxPStyle}>上限です</p>);
    }
    
    return(
        {pList}
    );
  }

for文で生成して配列に格納
retrunで配列を指定してますね…
今後はこのやり方で生成、削除をやっていきます

※JSXの記述はrender関数の中でやりましょう（別で書いても動きません）

3.2要素を追加する(onイベント設定)

ボタンクリックでinput type="text"を最大3つ追加
追加したinput属性にoninputイベント追加(pタグで入力値とIDを表示)

See the Pen addInputReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

constructor(props){
    //関数を正しく使えるようにする 
    this.changeText = this.changeText.bind(this);
}

render(){
    //for文で回して作る
    let inputList = [];
    for(let i=0; i < this.state.count; i++){
      inputList.push(
        <input
          type = "text"
          style = {this.textStyle}
          name = {this.state.textName[i]}
          onChange = {this.changeText}
        />
      );
    }
    
    return(
        {inputList}
    );
  }

当たり前ですがonイベントではthis.setStateを呼び出します
なのでbindする必要があるんですね

あと生成するタグのname属性
これは、かぶらないようにしましょう…
（バッグエンドの人から、ぶん殴られます）

3.3要素の削除

ボタンクリックで赤文字の前後を削除する

See the Pen removePReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

 //描画
  render(){
    //for文で回して作る
    let pList = [];
    for(let i = 0; i < 3; i++){
      let setStyle;
      //基準が分かりやすいように赤文字を設定
      if(i == 1){
        setStyle = this.redPTag;
      }else{
        setStyle = this.pStyle;
      }
      pList.push(<p style={setStyle}>Pタグ{i}</p>);
    }
    
    if(this.state.buttonDisabled){
      //先頭削除
      pList.shift();
      //末尾削除
      pList.pop();
    }
    
    return(
        {pList}
    );
  }

単純に配列の前後を指定して削除してるだけですね

3.4要素の一括削除

ボタンクリックでpタグを一括削除する

See the Pen removePsReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
    //for文で回して作る
    let pList = [];
    
    //活性状態のみ呼び出す
    if(!this.state.buttonDisabled){
      for(let i = 0; i < 3; i++){
        let setStyle;
        setStyle = this.pStyle;
        pList.push(<p style={setStyle}>Pタグ{i}</p>);
      }
    }
    
    return(
        {pList}
    );
  }

こちらも単純
活性時だけfor文を回すって処理です

4.CSS

さっきまでのサンプルで一切CSS出てきませんでしたが
無論CSS使えます…
（べた書きでも問題ないレベルなので、今まで使わなかっただけです）

4.1 cssを切り替える

ボタンクリックでクラスを切り替える(追加、変更)
赤文字→太字に、青文字→緑に、緑→デフォルトに戻す

See the Pen changeClassNameReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
    return(
        <p className = {this.state.testA}>テストA</p>
        <p className = {this.state.testB}>テストB</p>
        <p className = {this.state.testC}>テストC</p>
    );
  }

  //チェックボックスのイベント発火
  ChangeCheckbox(e){
    //console.log(e.target.checked);
    //更新するCSS
    let css = {A:"", B:"", C:""};
    
    if(e.target.checked){
      css.A= "red bold";
      css.B = "green";
      css.C = "";
    }
  }

ここもCSSのクラス指定
こちらHTMLとは別なので気を付けましょう
ミスの原因となります

後はクラス名の文字列を当てはめているだけなので
簡単だと思います

5.ラジオボタン

ここからは、ユーザー入力でよく使うものを解説していきます
ラジオボタンは特に新しい学びがないので、今までのおさらいになります

肩の力、抜いて話していきますね

5.1値の取得

チェックしたラジオボタンの値を表示する

See the Pen testRadioReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイントと言いたいところですが…
今までの復習みたいなものなので
特に新しく学ぶことは無いですねぇ

もし、サンプルコード読んでみて
分からない箇所がありましたら、今までの解説
もう一度、見返しましょう（onイベント発火の箇所）

5.2項目追加

ボタンクリックでラジオボタンを追加

See the Pen addRadioReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

ボタンのonイベントが1回しか呼び出されないので
だいぶシンプルに書いてますね

後は条件分岐で書いてますね
分からない人へ（要素の追加を見ましょう）

5.3初期状態に戻す

ボタンクリックで初期化（チェックを外す）

See the Pen initializeRadioReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
      let radioList = [];
      //チェック状態を渡す
      let setChecked;
      for(let i=0; i<this.values.length; i++){
        if(this.values[i] == this.state.pText){
          setChecked = true;
        }else{
          setChecked = false;
        }
          radioList.push(
              <label>
              <input
                  type = "radio"
                  name = "testRadio"
                  value = {this.values[i]}
                  onChange = {this.radioChange}
                  checked = {setChecked}
              />
              {this.text[i]}
              </label>
          );
      }
  }

this.state.pTextの値によってcheckedするものを切り替えてますね
こうすることで、初期化する際にthis.state.pText=""にすれば
結果的にチェックを外すことができます

5.4選択肢を減らす

チェックボックスの状態によって下位が選べなくなる

See the Pen unselectedRadioReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

 //チェックボックスのイベント
  checkboxChang(e){
    //更新用
    let setText = this.state.pText;
    let setChecked = this.state.checkboxChecked;

    //トグルスイッチ
    setChecked = !setChecked;

    //下位が選択中なら初期化する
    if(setText == this.addRadio.value){
      setText = "";
    }

    //更新
    this.setState({
      ["pText"]:setText,
      ["checkboxChecked"]:setChecked
    })
  }

先ほど紹介した削除の応用
チェックボックスは状態を切り替える
テキストは「下位」が選ばれているなら外す

スッキリしたコードを書けるように経験積んでいきましょう！

6.セレクトボックス

値だけなら簡単なのですが
選択中のindexやらテキストを取るに手間がかかる所です
勉強していきましょう

6.1値の取得

セレクトボックスで選択中のindex、値、テキストを表示

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
render(){
      let optionList = [];
      for(let i=0; i<this.values.length; i++){
          optionList.push(
              <option value = {this.values[i]}>
                  {this.text[i]}
              </option>
          );
      }

    return(
      <div> 
        <select name="testSelect" 
            value={this.state.value} onChange={this.ChangeSelect}>
          {optionList}
        </select>
          <p>
            index:{this.state.index}<br/>
            値:{this.state.value}<br/>
            テキスト:{this.state.text}
          </p>
      </div>
    );
}

//ラジオボタンのイベント発火
  ChangeSelect(e){
      let setIndex = e.target.selectedIndex;
      let setValue = e.target.value;
      let setText = e.target.options[setIndex].text;
      
      //更新
      this.setState({
        value: setValue,
        text: setText,
        index: setIndex
      })
  }

6.2項目の追加

ボタンクリックで項目に「下位」を追加

See the Pen addOptionReact by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//描画
  render(){
    let optionList = [];
    for(let i=0; i<this.values.length; i++){
      optionList.push(
        <option value = {this.values[i]}>
          {this.text[i]}
        </option>
      );
    }

    //追加処理のみ動く
    if(this.state.switch){
      optionList.splice(1,0,
        <option value = {this.add.value}>
          {this.add.text}
        </option>
      );
    }
  }

配列への追加方法が場所を指定する場合になってます
そこを気を付けるだけです

6.3初期化

ボタンクイックでセレクトボックスを初期状態にします

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

 //ボタンのイベント発火
  clickButton(e){
    this.setState({
      value:"",
      text:"",
      index:""
    });
  }

DOM操作ならselectedIndexを0または-1する必要がありますが
Reactなら""で初期化できます
シンプルでわかりやすいですね

6.4選択肢を減らす

チェックボックスの状態によって下位が選べなくなる

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//チェックボックスのイベント発火
  CheckboxChange(e){
    let setIndex = this.state.index;
    let setValue = this.state.value;
    let setText = this.state.text;
    let setSwitch = this.state.switch;

    //下位が選べない場合の並び
    let selectSort = {"nomal":1,"higherRank":2,"top":3};

    //トグルスイッチ
    setSwitch = !setSwitch;

    //順番が変わるのでindexを更新する
    if(setSwitch){
      setIndex = selectSort[setValue];
    }else{
      setIndex = selectSort[setValue]+1;
    }

    //選択中の値によって更新する
    switch (setValue) {
      //ランクを選んでください状態
      case "initial":
        setIndex = 0;
        break;
      //下位を選んだ状態
      case this.add.value:
        setValue = "";
        setText = "";
        setIndex = "";
        break;
      //未選択状態
      case "":
        setIndex = "";
          break;

      default:
        break;
    }

    //更新
    this.setState({
      value: setValue,
      text: setText,
      index: setIndex,
      switch: setSwitch
    });
  }
}

8.1コンポーネントを呼び出す

親と子のコンポーネントを使って表現します
親が子コンポーネントを呼び出す

See the Pen childComponent by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

class MyComponent extends React.Component{
  //描画
  render(){
    return(
      <div>
        <h1>親コンポーネント</h1>
        {/*子コンポーネントを呼び出す*/}
        <Child/>
      </div>
    );
  }
}

class Child extends React.Component{
}

//コンポーネントを適応
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

下2行をみれば分かりますが。
div id="root"にレンダリングを適応しているのは
MyComponentコンポーネントを指定してます

で、childコンポーネントはどこで呼び出しているか？
それはMyComponentのrender関数の戻り値
ここでの記述がありますね

これで親から子のコンポーネントを呼び出すことができます

8.2親が子コンポーネントに値を渡す

親が子コンポーネントに値を複数渡す

See the Pen valueParent by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

class MyComponent extends React.Component{
  //初期設定
  constructor(props){
    //親クラスのコンストラクタを呼び出す(Reactの要素を使えるようにする)
    super(props);
    
    //子に渡す値
    this.value="親の値",
    this.num=1;
  }
  
  //描画
  render(){
    return(
      <div>
        {/*子コンポーネントを呼び出す*/}
        <Child 
          value = {this.value}
          num = {this.num}
         />
      </div>
    );
  }
}

class Child extends React.Component{
  render(){
    return(
      <div>
        <h1>子コンポーネント</h1>
        <p>
          value:{this.props.value}<br/>
          num:{this.props.num}
        </p>
      </div>
    );
  }
}

MyComponentコンポーネントのrender関数
ここの中でvalueとnumを子に渡してますね

では、子側は？
this.props.value
this.props.num

propsってのが出てきました
これは親が子に値を渡したいときに使うオブジェクトです

つまり親側で渡した値は
子側は this.props.~ で取り出せるということです

8.3親が子コンポーネントの関数を呼び出す

親のOnイベントで子の色指定関数を呼び出す

See the Pen callChildFunc by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

//継承して色々いじる
class MyComponent extends React.Component{
  //初期設定
  constructor(props){
    //親クラスのコンストラクタを呼び出す(Reactの要素を使えるようにする)
    super(props);
    //参照を作製
    this.childRef = React.createRef();
  }
  //描画
  render(){
    return(
      <div>
        {/*参照を子コンポーネントに渡す*/}
        <Child ref={this.childRef}/>
      </div>
    );
  }
  //チェックボックスのイベント発火
  changeCheckbox(e){
    this.childRef.current.SetColor(e.target.checked);
  }
}

class Child extends React.Component{
  //親から呼び出されるメソッド
  SetColor(value){
    let setStyle = {color:"black"}; 
    if(value){
      setStyle.color = "red";
    }else{
      setStyle.color = "black";
    }

    //値を更新
    this.setState({
      ["pStyle"]:setStyle
    });
  }
}

子側は特に解説することないですが、親側は色々書いてますね
3つのポイントがあるので、よく読んで理解しよう

1）まずはReact.createRef();
コレで子要素にアクセスするために必要な参照を作ります
（子がやってるDOM操作を親から呼び出せるようにする）

2）作った参照は子要素のref属性に入れる必要があります

3）自分のコンストラクタで子の関数を呼び出すときは
渡した参照.current.の後に子の関数を書けば動かせます

今回のサンプルで1) ~ 3)をやってる箇所を抽出すると…

.jsx

// 1)参照を作製
this.childRef = React.createRef();
// 2) 1)の参照を子に渡す
<Child ref={this.childRef}/>
// 3) 子の関数を呼び出す
this.childRef.current.SetColor(e.target.checked);

8.4子が親の関数を呼び出す（値を渡す）

子のOnイベントで親の色指定関数を呼び出す(値も渡す)

See the Pen childToParentMethodValue by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事なポイント

.jsx

class MyComponent extends React.Component{
 
  //描画
  render(){
    return(
      <div>
        {/*子のコンポーネント（子メソッド→親メソッド）*/}
        <Child parentMethod={this.setColor}/>
     </div>
    );
  }
}

class Child extends React.Component{
   //チェックボックスのイベント発火
   changeCheckbox(e){
   let setStyle = Object.assign({},this.state["pStyle"]);
    //値を更新する
    this.setState({
      [e.target.name]: e.target.checked,
    },
    //親を呼び出す
    this.props.parentMethod(e.target.checked)
    );
  }
}

proposに関数を指定
その関数で親の関数を呼び出してる形になります

親に値を渡したい場合でも同様に
proposに関数を指定
その関数に値を渡す→使うという形になります