こちらの記事は以下の書籍を参考にアウトプットとして執筆しました
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
propsのチェック
Reactにはpropsの型チェック機能がある。
ますはインストール
$ npm install -save prop-types
ReactコンポーネントのptopTypesに型情報を記載していく。
基本のproprTypes
javascriptの基本型に対応するPropType
PropTypesとpropTypesは別物
| 名前 | 説明 |
|---|---|
| PropTypes | インポートしたprop-typesモジュールが持つオブジェクトで型情報を持つ |
| propTypes | 自作したReactコンポーネントが持つプロパティ。ここに各props野方情報を記述 |
配列やオブジェクトのpropTypes
なんの配列かどんなオブジェクトかを記述できる。
PropTypesは型情報作成する関数を持っている。
SomeComponent.propTypes = {
//配列の中身を指定
someArray: PropTypes.arrayOf(PropTypes.number),
//オブジェクトの中身を指定
someObject: PropTypes.object(PropTypes.number),
//オブジェクトについては個別のプロパティについて指定できる
//complexObjectは文字列のnameと数値のageを持つオブジェクトであると定義している。
complecObject: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
}),
}
参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
JSX独自のpropTypes
Reactコンポーネントは最後はHTMLになるJSXなどの表示要素をプロパティとして受け渡すときのために、elementやnodeというエイリアスがある。
Todoアプリの作成
| 名前 | 説明 |
|---|---|
| state | 何を入力するか、何を表示すべきかの状態を示す。 |
必要なコンポーネントは以下
- アプリ全体表す
- 入力フォーム
- ひとつひとつのTodoを表す
- Todoの一覧を表す
Appコンポーネント
各コンポーネントをまとめる
表示上の要件なし
データ管理を行う
TodoInputコンポーネント
Todo入力のコンポーネント
TodoListコンポ
propsを受け取ったtodoListを元に一つのTodoItemwo表示
TodoItem
ひとうひとつのTodoを表すコンポ
stateの初期値
初期値はconstructorで設定
this.stateプロパティにtasksとuniqueIdという値を含んだオブジェクトを設定している。
このstateという名前は何でもわけじゃなくてこの名前であるからこそ意味がある。
stateの値は直接変更しない.
直接弄っているのはocnstructorだけ
合わせてtodoListに渡す部分も変更
stateの変更
次はユーザ入力でしんきTODOを追加できるようにする
tasksはTodoアプリに紐づく情報だからこのメソッドはAppポンコで作る
addTodo(title) {
const {
tasks,
uniqueId,
} = this.state;
tasks.push({
title, if: uniqueId,
})
this.setState({
tasks,
uniqueId: uniqueId + 1,
})
}
参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
引数にTodoのtitleを受け取る
stateに記録されたtasksにしんきTODOをpushしてせtStateでstateに保存している。
stateを変更するにはsetStateを使う
setStateは今のを置き換えるんじゃなくて変更があった問だけstateを上書きする
uniqueIdがsetStateに渡されなくても値は保持される。
なぜsetStateを使うのか
配列のpushメソッドはもとの変数に値を追加するメソッドのため、pushした時点でstateの状態が変化する。
直接stateを変更すると副作用がある。
作成したaddTodoメソッドをTodoInputコンポに渡す
最後にaddTodoメソッドで適切ににstateを変更するコードを追加
this.addTodo=this.addTodo.bind(this);
bindはすべてのFunctionオブジェクトが持っているメソッド
これはaddTodoメソッドでAppコンポのstateを変更するために必要
javascriptでは関数を変数として渡せるが、thisは何を指すのかまでは渡されない。
addTodoメソッドの定義時はthisはAppじゃなくて他のコンポやDOM。
こうすることでaddTodoは常にAppkコンポのstateを参照する。
bindを使わない方法
アロー関数
定義したメソッドをpropsとして渡すんじゃなくて、アロー関数でメソッドを使う関数を定義して渡す。
<TodoInput addTodo={(title)=>{this.addTodo}}/>
参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
こう書けばconstructorにbindを書かなくても大丈夫
デメリットは同じメソッドを複数のコンポに渡すときには毎回これを書かないといけない
とりあえず当面はbindを使う方向で。
イベントハンドリング
AppコンポのaddToDoをTodoInputで使ってみる
TodoInputコンポはpropsとしてaddTodoが渡されていた
これでクリックするたびにaddtodoが呼ばれる
イベント引数
onClickなどのイベントは引数としてEventオブジェクトを受け取っている
これはブラウザでも同様に動く。ブラウザ本来のイベントと同じように使える
以下は<a>タグにイベントを追加した例
そのままでは<a>自身の機能でページ遷移がされるが、これを止める例
const { render } = require("react-dom");
handleClick(e){
e.preventDefault();//preventDefaultによりaタグのデフォルト機能のページ遷移を止めている。
this.PaymentResponse.addTodo('新規TODO')
}
render(){
return (
<div>
<input placeholder="新規TODO" />
<a href="/register" onClick={this.handleClick}>登録</a>
</div>
)
}
参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
fromの操作
Reactではフォーム入力値もstateで扱う。
- フォームの初期値をconstructorでstateに渡す
- state保値をinput要素のvalueに設定する。
- handleChangeメソッドを記述