【React】stateとイベント

一応、ここは学習のアウトプットの場と言うことを先にお伝えしておきます...

Reactの勉強をしようと思って色々検索すると、初心者向けの記事は色々出てくるけれどどれも書き方が違ったり、コード通りに書いても動かなかったりと中々初心者のハードルが高いような気がするReact
どうも調べると技術は日々新しくなっているから書き方も変わっていく、と。
何ならReactのチュートリアルですら書き方が古いものとか言う話も。
何を信じればいいのか分からない疑心暗鬼状態なのでとりあえずProgateを始めてみます

イベント

divやbuttonの要素をクリックしたりした時に発火するイベントはタグの中に書く

<button イベント名={ () => {処理}} > </button>

イベントはアロー関数を使う

「その要素がクリックされた時に発火」は　onClick を使う
例えばクリックでコンソールにログを出す

<button onClick={()=>{console.log('Hello World')}}> </button>

コンソールに Hello World が表示される

state

stateはオブジェクトとして定義する
クラス定義からreturnの間に記述
this.state = {キー名: 値}　の書き方で記述

// インポート
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


// コンポーネントの内容
class App extends Component {
 render() {

  state = {text: "Hello World"}

   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

// エクスポート
export default App;

こんな感じかな

stateの値はthis.setStateで変更できる
stateの値が変更されるとその情報をレンダリングしてビューの情報を書き換える
stateの値が変わるたびにHTMLが変化するように見える..と言う感じ

stateとイベント

ボタンを押して、見た目が変わる動きを作ろうとするときは例えば

• buttonにクリックイベントを持たせる
• イベントにはstateを書き換えるようにしておく
• 書き換わったstateでレンダリング
• 元の表示を書き換えるのでユーザーからは一瞬で変わったように見える

って言う感じですねー

コードで書いてみました

// インポート
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


// ファイルの実質上の中身
class App extends Component {

  state = {text: 'World'}

  handleClick(text){
    this.setState({text: text})
  }

 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Hello {this.state.text}</h1>
         <span onClick={()=>{this.handleClick("World")}}>world</span>
         <span onClick={()=>{this.handleClick("React")}}>react</span>
       </header>
     </div>
   );
 }
}

// エクスポート
export default App;

まず最初にstateが初期化されます
そして handleClick と言う名前のイベントが設定されます。引数はtextとします
このイベントが呼ばれた時、stateのtextは引数の値に変わりレンダリングされるようになっています

下のJSX(HTMLみたいなとこ)では Hello の後に初期化したstateのキー "World" が呼ばれているので最初の表示はHello World です

spanに onClick ,つまりspanがクリックされた時に、handleClickのイベントが呼ばれ引数textにクリックされた方の文字列が渡されます
渡された文字列でstateを書き換えレンダリングし、Helloの後の文字を書き換える...
理解するのに苦しみましたが、スクールで３ヶ月みっちりRailsを触っていたのでこの辺のやりとりはわかるようになってきました（汗

これでクリックすると書き換わるようになりました

すごいなぁ、何かもうすごいとしか言えない

React楽しい！楽しいReact!

また学習を進めて更新していきます